Unstack Dev Docs
Search…
Overview
Unstack provides a component editor that allows developers to manage the components that are available to page authors within the page editor. Customize existing components or add your own!
Getting started
To add or edit components you'll need to have the Developer or Administrator role within Unstack. Then, click on Design -> Sections in the navigation to begin editing components:
Add, edit, and delete components within the section editor
The component editor
Components are written in HTML, CSS, and JavaScript and use special tags we call NoML to make parts of the components editable within the page editor:
Components are just HTML, CSS, and Javascript!
A NoML example
NoML is Unstack's proprietary markup language that makes it possible to build components that can be edited within the page editor. Using NoML you can define exactly what parts of a component should be editable by page authors. You can use any HTML you want within a component, but you'll need to use NoML to make bits editable.
Here's the markup from the 3D Icon Callouts component pictured above:
1
{{ section(content.section, enableHeader=true, classes="center|Center,left|Left") }}
2
{% for callout, i in collection(content.callouts,
3
minItems=1, maxItems=9,
4
defaultItems=3,
5
enableSorting=true,
6
tagName="div",
7
className="callouts"
8
) %}
9
{{ item(tagName="div", className="callout") }}
10
{{ media(callout.media, className="media", category="icon", aspectRatio=1) }}
11
{{ richtext(callout.text, startTag="h3") }}
12
{{ actions(callout.actions) }}
13
{{ enditem }}
14
{% endfor %}
15
{{ endsection }}
Copied!
At first glance this might look a little scary, but once you understand what's going on it's actually quite simple. NoML adds additional "tags" to HTML for controlling the dynamic bits. Tags are enclosed in curly brackets
{{...}}Several tags appear in the example above:
- 1.Wrapping the entire component are
{{ section }}tags. In this example, you can see that there are attributes to control whether this component should allow a header and the classes for aligning the component. - 2.There's then a
{% for %}loop that generates multiple{{ items }}based on user input. These are rendered with thecalloutclass which is used by the CSS to make them look like cards. - 3.Finally, the
{{ media }},{{ richtext }}, and{{ actions }}tags provide the icon, text, and editable actions (buttons) for the user of the component.
Available tags
There are an array of tags within Unstack that provide dynamic functionality for page authors. If you're building your own components, you'll want to familiarize yourself with each of them.
Block tags
Block tags are the editor-enabled containers for your Unstack sections, allowing you to add toolbars and controls to areas of your content. They include:
Inline tags
Inline tags allow you to add smart components to your content, which bring editor-enabled controls for managing the specific types of content. Inline tags available in Unstack are:
Basic tags
Basic tags allow you to print values and literals to your HTML templates.
Generators
Generators are a special type of tag that can be used in a
for operator to generate arrays of items and be rendered in your HTML as a list, table, flexbox, or grid.Generators are a special type of tag that can be used in a
for operator to generate arrays of items to receive a treatment, and be rendered in your HTML as a list, table, flexbox, or grid.Operators
Operators are special logic tags that work like control structures for your NoML code.
Last modified 2d ago