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. It is quite similar to JSX. 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:
<Section  
  dataRef={content.section} enableHeader={true}
  properties={[{
    "name": "layout", 
    "label": "Alignment", 
    "attribute": "class", 
    "type": "select", 
    "options": {"Center": "center", "Left": "left"}, 
    "default": "center", 
    "required": true}]}>
  <Collection
    dataRef={content.callouts}
    minItems={1} maxItems={9}
    defaultItems={3}
    enableSorting={true}
    tagName="div"
    className="callouts"
    item={(callout, i)=>
      <Item tagName="div" className="callout">
        <Media  dataRef={callout.media} className="media" category="icon" aspectRatio="1"/>
        <RichText  dataRef={callout.text} startTag="h3"/>
        <Actions  dataRef={callout.actions}/>
      </Item>
    }/>
</Section>
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" like Section, Media, RichText to HTML for controlling the dynamic bits.
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 Collection tag that generates multiple Item based on user input. These are rendered with the callout class which is used by the CSS to make them look like cards.
3.Finally, the Media, RichText, and Action 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:
​Section​
​Box​
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:
​Media​
​Media Instance​
​Code​
​RichText​
​PlainText​
​Actions​
Basic tags
Basic tags allow you to print values and literals to your HTML templates.
​Values​
​Literals​
Generators
Generators are a special type of tag that can be used to generate arrays of items and be rendered in your HTML as a list, table, flexbox, or grid.
​Collection​
​ArticleCollection​

Next - Block Tags

Section

Last modified 3mo ago

Copy link

Outline