The basics

Quick intro video

The architecture

Tidy produces static html files. When you’re done editing and press save, Tidy automatically creates the files and either saves them on our servers or sends them to any hosting provider you want. When the end user visits your site, the server just returns the html files and Tidy isn’t called at all.

Tidy itself is offered as SaaS, it can’t be downloaded and installed. But as we mentioned above, you can choose to host the actual website on any host you choose (like GoDaddy) or host it on our Amazon servers.

Drag & drop or code yourself

Tidy provides two different ways to manage your website. You can either use the UI to make changes without coding or then you can write the code directly in the Ace based text editor in Tidy’s files section. Tidy is reactive, so changes you make in the UI are immediately visible in the code and vice versa.

Pages and templates, saving and publishing

The basic building blocks of a Tidy website are pages and templates.
A page is a result of merging two things:

• A template that specifies the page layout
• Page content

Examples of pages are “About” and “Contact”, examples of templates are “Frontpage” and “Subpage”.

The same template can be shared by many pages and when you make changes to that template it affects all pages that share that template. When you make changes to a page’s content it only affects the page in question.

When you save changes made to pages, templates and styles, they are still just visible to you. Changes must also be published to appear on the live site.

Getting started

Creating your first website

You can jump right into the Create Site wizard without registering

The wizard asks you to pick a template, give the site a name and then you’re done.

Different users see different things

There are three user levels in Tidy

• Admin
• Designer
• Editor

When you create the site, you’re automatically an Admin with all rights. By default, a Designer can do everything else except creating new Admins and major changes like deleting the entire site.

An editor can just make changes to the website content, which is why the Editor sees a different UI than Designers and Admins. If you’re an Admin or a Designer, you can switch between editor view (for editors) and designer views (for designers and admins) from the account icon in the bottom left corner. Designers and Admins can switch to editor view, but editors can’t switch to designer view.

The main sections

Pages (both editor and designer view)

Create new pages and edit content (text and images) of existing ones.

Media (editor view)

A file manager where the end user can manage her files (images and public documents like Word documents etc.). She can’t see any other files like templates or css files.

Templates (designer view)

Make changes to the layout.

Files (designer view)

Manage all the files of the website except the static html files. Files include all assets, template files, style files, configuration files etc.

Currently, you can't see the static html files anywhere in the UI.

Styles (designer view)

Manage global styles.

Settings (designer view)

Manage users, domains, analytics etc.

The main UI panels

The Tidy UI consists of 4 main panels, of which the left and right panel can be minimised. The panels from left to right are:

Navigation panel

The Tidy main menu.

Left panel

To choose which page, template or file is displayed in the centre panel.

Centre panel

Displays the page, template or file you’re editing.

Right panel

Displays properties of the active page, template, file or element.

Managing content

Adding pages

In the page section, click on the add page button at the top of the left panel. A create page modal will open asking you to provide basic information about the page like title and template. The create page modal and what pages are shown in the create page menu can be customised using page types.

Editing pages

To edit text that has been made editable in the template, just click on it to show the editor. Depending on the type of text block the editor grants you different tools to edit the content. In a rich text block, you can also use the editor to add images, lists etc. To change an image within an editable text block, you need to click it twice. One time to fire up the editor and another to change the image.

To change single images (that are not within an editable text block) or background images, just click the image.

Saving and publishing

When you click save, your changes are saved in the CMS, but not yet visible on the public site. Click "Publish" to make them visible on the public site

Page properties

In the right panel, you can find a link to page properties, where you can edit the page’s metadata, including the most common SEO fields. The fields that are shown in page properties can be configured with page types.

Managing files

The file manager in editor view is called Media, and the file manager in designer view is called Files. Files shows the entire file tree, while Media only shows one folder: /media. All content files (images, attachments) should, therefore, be saved in the media folder. When the client clicks an image to change it, she only sees media and its subfolders.

In the editor view file manager (Media) you can:

Create new files and folders.

By clicking the plus icon at the top of the left panel.

Move, rename and delete files and folders

Using the buttons in the right panel.

Editing templates

Site templates and page templates

A page template defines the layout of a single page. A website usually consists of more than one-page template, at least separate frontpage and subpage templates.

The collection of page templates for a site forms a site template. Site templates are only used in the create site process so when we refer to “templates” we mean page templates.

Templates and includes

A Tidy page template is a single file specifying the layout of a page. You can include other partial templates (we call them includes) using the include command. A simple html template structure looks like this:

<html>
  <head>
    ….
  <head>
  <body>
    <!--#include file="_header.html" -->
    <div>Page content comes here</div>
    <!--#include file="_footer.html" -->
  </body>
</html>

Tidy interprets all template files that doesn't start with '_' as complete page templates, so start your include filenames with an underscore (_).

You can use includes however you like and even include includes in includes, but each template and include must be valid and complete html. This means that you can’t open a tag in one include and close it in another. All tags must be open and closed in the same file.

When you edit and save an include, the change is immediately updated and published to all pages using templates that use the edited include. For example, if you include the same header.html to all your templates and edit that file, your header changes on all pages.

Frameworks

If you code the templates yourself, you can use any responsive framework (or none). If you’re using Tidy’s layout and style tools they can be configured to support any (or no) framework.

Currently Tidy only supports Bootstrap 3, but we’ll add support more if there’s demand. You can affect our roadmap by voting for more frameworks. The voting link is inside the CMS.

Code and/or WYSIWYG

If you prefer code you can just open the file in the file manager and make the changes there. Regarding the template html there are no Tidy specific rules (except that files need to be valid). Just write whatever you like.

Alternatively, you can use the drag and drop editor (or use both) in the templates section. The template section shows the template in the centre panel and its html structure in the left panel.

You can use either panel to make your changes and they are automatically kept in sync.

Adding, moving and removing blocks

We call any html snippet that can be edited a block. A single heading element (<h1>Hi!) is a block. An entire form with fields and buttons is also a block. Blocks can contain other blocks so the submit button in your form is also a block.

What’s distinctive about a block is that it:

• Can be added, moved and deleted
• Has properties

Adding blocks

First select where you want to add a new block by clicking on an adjacent block either in the tree or the centre panel. Then click one of the appearing plus icons depending on if you want to add a new block before or after the block you clicked.

The add block panel appears with all the preconfigured blocks Tidy provides. Click on whatever block you want to add to add it.

Moving blocks

Drag & drop any block in the html tree to where you want it. Drag & drop currently only works in the html panel (vote in our feature request system to add it to the centre panel).

Removing blocks

Click the block to select it and then click remove in the right panel.

Block styles

Blocks primarily get their styles from the global styles, but you can change the styles of a single block in block properties, which opens in the right panel whenever you select (click on) a block.

The block properties vary depending on block type and can be configured. When you make changes to block styles in the right panel, they are written to the template as inline styles (<div style=”color: green;”></div>).

Importing sites and templates

Importing sites

This is something Tidy can't do yet. Vote for the feature if you want it.

Importing templates

You can 'import' your template by creating a new empty template file, cut-pasting your code into it and then manually upload your assets and styles.

It's clunky, we know. Vote for a better template importer if you want it.

Making content editable

Making the content editable

If you make a template for each page you can type the content directly into the template code (<h1>Hi!</h1>), but if you want to use the same template on several pages and make the content editable with the inline editor, you need to separate template and content.

In Tidy, that is done by specifying a path from where the html element gets its data

<h1 v-html=“page.heading”>Some placeholder text</h1>

We use the Vue.js framework to populate template with content and you can use all Vue features in Tidy.

To make an text element editable, just add v-html="page.something" where something can be any string you want.

Placeholders

When you create a page it has no data, meaning that page.heading is empty. If an elements data field is empty it shows the contents of the element in the template code.

<h1 v-html=“page.heading”>Some placeholder text</h1>

In the case above a new page heading would be "Some placeholder text" until you click the heading and give it some new content with the inline editor, "My heading" for example. "My heading" is then saved to page.heading and from that moment on the heading says "My heading" on that page.

Page, Site, Meta

There are three types of content in Tidy:

• Page - Content can only be used on that specific page
• Site - Content is available for the entire site
• Meta - Used for metadata but otherwise works like page

Example:

<html>
  <head>
    <title v-text="meta.title"></title>
  </head>
  <body>
    <h1 v-html="page.heading"></h1>
    <footer>
        <a :href="'tel:'+site.phone" v-html="site.phone"></a>
    </footer>
  </body>
</html>
    

In the example above the title and heading change on every page, but the phone number is the same on every page. If you change the phone number on any page, it will change on all pages.

Editing different attributes

Eventually you will be able to make any html attribute editable, but currently tidy supports the following:

• v-html - Makes the content editable with the inline editor including all styling tools, images, lists, tables etc.
• v-text - For displaying text, not editable
• :src - Changes the source of an image. Clicking the image opens the change image modal.
• :alt - Change the alt text of an image. Adds a field for alt to the image modal.
• :href - Changes the path of a link
• :style="{ backgroundImage }" - Change the background image of an element. An image picker opens when you click the element.

Example with placeholders:

<header>
  <span v-html="page.call_to_action">Call us at</span><a :href="'tel:'+site.phone" v-html="site.phone">555 123 4567</a>
</header>
<h1 v-html="page.heading">Type heading here</h1>
<img class="hero-image" :src="page.hero_image" :alt="page.hero_image_alt" src="http://placehold.it/350x150" alt="Alt placeholder">
<div class="wrapper" :style="{ backgroundImage: 'url(' + page.background_image + ')' }" style="background-image: url('http://placehold.it/2000x100');">
  <div class="content" v-html="page.content">Type page content here</div>
</div>

Working with components

What are components

Components are custom tags like <tidyBsNav></tidyBsNav> that can be added to templates and uses VUE.js to generate html code.

The tidyBSNav component, for example, adds a Bootstrap navbar to the template.

The Tidy render object

The render object gives you access to all the site's pages and content. You can for example create a list of news headings by looping trough all news pages and displaying a heading from each page.

Below is an example of the render object structure. 'Page' and 'Meta' contain page specific content, 'Site' contains sitewide contente and 'Lang' contains language wide content. 'Tree' contains all the pages in the site.

tidyList

Lists fields from subpages. Normally use for news list and product lists.

Arguments:

• root: the parent page of the pages that are shown in the list
• limit: how many items are shown

Inside the list component you also need to add a template for the list items.

Example:

//code
<tidy-list root="news" limit="10">
  <ul>
    <li v-for="post in pages">
      <a :href="'.' + post.info.pathname">
        <h3 v-text="post.page.heading"></h3>
      </a>
    </li>
  </ul>
</tidy-list>

//result
<ul>
  <li>
    <a href="/news/post-1">
      <h3>This is the heading of post 1</h3>
    </a>
  </li>
  <li>
    <a href="/news/post-2">
      <h3>This is the heading of post 2</h3>
    </a>
  </li>
</ul>

tidyUlNav

Generates the navigation structure for the site as a list.

It takes the following arguments:

• levels: the number of levels shown in the navigation.

Example:

//code
<nav id="main-nav">
  <tidy-ulnav levels="2"></tidy-ulnav>
</nav>

//result
<nav id="main-nav">
  <ul>
    <li>
      <a href="/">Frontpage
    </li>
    <li>
      <a href="/subpage">Subpage
    </li>
  <ul>
</nav>

tidyBsNav

Adds a Bootstrap navbar to the template and automatically generates the navigation structure for the site.

It can be styled with normal Bootstrap classes/variables and takes the following arguments:

• levels: the number of levels shown in the navigation.

Example:

//code
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" v-html="site.title">Bootstrap starter</a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="navbar">
      <tidy-bsnav levels="2"></tidy-bsnav>
    </div>
  </div>
</nav>

//result
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" v-html="site.title">Bootstrap starter</a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="navbar">
      <ul class="nav navbar-nav">
        <li>
          <a href="/">Frontpage
        </li>
        <li>
          <a href="/subpage">Subpage
        </li>
      <ul>
    </div>
  </div>
</nav>

Customising Tidy (available soon)

CMS, Team and Site levels

There are three levels of configs and resources:

• CMS, which is visible to anyone using Tidy
• Team, visible to members of the same team
• Site, only visible within a single website

The CMS and team configs and resources are found in the shared folder (/shared/cms and /shared/[teamName]), the site config in the /config folder.

Folder structure:
ROOT
  |-- config
  |-- shared
      |-- cms
          |-- config
              |-- blocks
              |-- elementProperties
              |-- modules
              |-- pageTypes
              |-- styleProperties
              |-- templates
      |-- [teamName]

A config with a narrower scope overrides broader scope configs, so site overrides team and team overrides CMS. This means that you can change the Tidy configuration on team level and even for single sites.

Configurable stuff:

• Blocks (content blocks that can be added with the UI)
• Element properties (what fields HTML element properties contain
• Modules (modules that can be added with the UI)
• Page types (how pages are created and what fields page properties contain)
• Style properties (global style panel controls and presaved styles)
• Templates (what templates are available when creating new sites)

We'll go through each one separately

Overwriting defaults

Tidy is configured using JSON files. JSON files are merged in a specific order so that files in the in the /config folder overwrite /shared/[teamName]/*/*.json which overwrite /shared/cms/*/*.json.

To overwrite defaults, you need to create a similar folder/file structure in your config or team folder and overwrite the parts you want.

Let's take a simple example with blocks. Suppose you don't want to encourage designers to add buttons to their templates. Then you can remove the button sections from the Add block panel for your team.

//part of orginial /shared/cms/config.json
{
  "blocks": {
    "text": {
      "visible": true,
      "require": "shared/cms/config/blocks/text.json"
    },
    "image": {
      "visible": true,
      "require": "shared/cms/config/blocks/image.json"
    },
    "button": {
      "visible": true,
      "require": "shared/cms/config/blocks/button.json"
    }
  }
}

//you add to /shared/[teamName]/config.json
{
  "blocks": {
    "button": {
      "visible": false
    }
  }
}

//end result when files are merged
{
  "blocks": {
    "text": {
      "visible": true,
      "require": "shared/cms/config/blocks/text.json"
    },
    "image": {
      "visible": true,
      "require": "shared/cms/config/blocks/image.json"
    },
    "button": {
      "visible": false,
      "require": "shared/cms/config/blocks/button.json"
    }
  }
}

Note that creating a new team config.json, doesn't overwrite the CMS config.json completely. Only the values you change are changed.

Also, note that you need to recreate the object structure all the way up to the root object:

//won't work

    {
  "button": {
    "visible": false
  }
}


//works

{
  "blocks": {
    "button": {
      "visible": false
    }
  }
}

Customising blocks

Content blocks are premade HTML snippets that you can add to your template.

You can control what blocks appear in the Add block panel and create your own blocks.

The sections that appear in the block panel are listed in /shared/cms/config.json.

/shared/cms/config.json

{
  "blocks": {
    "text": {
      "visible": true,
      "require": "shared/cms/config/blocks/text.json"
    },
    "image": {
      "visible": true,
      "require": "shared/cms/config/blocks/image.json"
    }
  }
}

To add a new block category to your team, add a line

/shared/[teamName]/config.json

{
  "blocks": {
    "myCategory": {
      "visible": true,
      "require": "shared/[teamName]/config/blocks/myCategory.json"
    }
  }
}

Then add the new category JSON and specify the blocks. You can divide the panel into subcategories (example: Green elements, Red elements) and specify elements for each subcategory (Green 1, Green 2).

Each element needs a title and a preview file that is shown in the panel and a template containing the actual block. The preview can be an html, png or a jpg file.

/shared/[teamName]/config/blocks/myCategory.json

{
  "title": "My category",
  "description": "",
  "subcategories": {
    "greenElements": {
      "title": "Green elements",
      "blocks": {
        "green1": {
          "title": "Green 1",
          "preview": "shared/[teamName]/config/blocks/myCategory/green1-preview.html",
          "template": "shared/[teamName]/config/blocks/myCategory/green1-template.html"
        },
        "green2": {
          "title": "Green 2",
          "preview": "shared/[teamName]/config/blocks/myCategory/green2-preview.png",
          "template": "shared/[teamName]/config/blocks/myCategory/green2-template.html"
        },
      }
    },
    "redElements": {
    "title": "Red elements",
    "blocks": {
      "green1": {
        "title": "Green 1",
        "preview": "shared/[teamName]/config/blocks/myCategory/red1-preview.jpg",
        "template": "shared/[teamName]/config/blocks/myCategory/red1-template.html"
      },
    }
  }
}

The preview file.
(Website CSS isn't available in the Add block panel. Use an image of you want a more styled preview)

/shared/[teamName]/config/blocks/myCategory/green1-preview.html"

<h1 style="color:green"></h1>

The template file

/shared/[teamName]/config/blocks/myCategory/green1-template.html"

<h1 class="green" v-html="page.green">Some placeholder text</h1>

Tidy blocks are always editable by default, but yours don't have to be.

Customising modules

Modules are collections of templates that work together. Examples are news and products. You can also create your own.

Available modules are listed in /shared/cms/config.json:

/shared/cms/config.json

{
  "modules": {
    "news": {
      "visible": true,
      "require": "shared/cms/config/modules/news.json"
    },
    "products": {
      "visible": true,
      "require": "shared/cms/config/modules/products.json"
    }
  }
}

To add your own module, add it to the list in the corresponding team file:

/shared/[teamName]/config.json

{
  "modules": {
    "myProductModule": {
      "visible": true,
      "require": "shared/[teamName]/config/modules/myProductModule.json"
    }
  }
}

When you install a module to your site Tidy:

• Imports the module templates to the site's template folder
• Writes paths of module page types to the site's config (if you want the pages of your new module to appear as separate entries in the 'Add page menu')
• Optionally creates demo pages with the new templates

How this is done is specified in the module's own JSON. In the example below we create a new module called 'My product module', which when it is installed:

• Imports three new templates (my-product-list.html, my-product-item-one-column.html, my-product-item-two-columns.html)
• Adds two new page types (myProductList, myProductItem)
• Creates four pages ('Product list' with subpages 'Product 1', 'Product 2' and 'Product 3')

You can prepopulate the pages with any content you want, by using the structure of the site object. In the example, we've prepopulated the fields page.title and page.content for the list page and page.title, page.price and page.description

/shared/[teamName]/config/modules/myProductModule.json

{
  "title": "My product module",
  "thumbnail": "shared/[teamName]/config/modules/myProductModule/my-product-module-thumb.jpg",
  "pageTypes": [
    "/shared/[teamName]/pageTypes/myProductList.json",
    "/shared/[teamName]/pageTypes/myProductItem.json"
  ],
  "templates": [
    "/shared/[teamName]/modules/resources/myProductModule/my-product-list.html",
    "/shared/[teamName]/modules/resources/myProductModule/my-product-item-one-column.html",
    "/shared/[teamName]/modules/resources/myProductModule/my-product-item-two-columns.html"
  ],
  "pages": [
    {
      "pageType": "myProductList",
      "template": "my-product-list.html",
      "name": "My products",
      "data": {
        "page": {
          "title": "My products",
          "content": "Below is a list of products"
        }
      },
      "children": [
        {
          "pageType": "myProductItem",
          "template": "my-product-item-one-column.html",
          "name": "Product item 1",
          "data": {
            "page": {
              "title": "Product item 1",
              "price": "$10",
              "description": "This is the description of Product 1"
            }
          }
        },
        {
          "pageType": "myProductItem",
          "template": "my-product-item-one-column.html",
          "name": "Product item 2",
          "data": {
            "page": {
              "title": "Product item 2",
              "price": "$20",
              "description": "This is the description of Product 2"
            }
          }
        },
        {
          "pageType": "myProductItem",
          "template": "my-product-item-two-columns.html",
          "name": "Product item 3",
            "data": {
            "page": {
              "title": "Product item 3",
              "price": "$30",
              "description": "This is the description of Product 3"
            }
          }
        }
      ]
    }
  ]
}

Now you're done configuring your module, but you still have to create everything the module needs:

• Templates
• Pages types
• Thumbnail

and put them in the right places (the paths you've specified in myProductModule.json

Customising page types

Whenever a page is created, it's assigned a page type. The page types define:

• What items are available in the 'Add page menu'
• What fields are available in the 'Add page modal'
• The above-mentioned fields configuration (options, placeholders, order, width)
• Default values for required fields the user can't change
• Fields and configuration for the page properties panel
• In what order pages are shown in the navigation

Example: You want:

• To add 'Add news' to the 'Add page menu'
• The new page to use the news-item.html template
• All new news pages to be added under the page 'News'
• To force the user to specify a heading and a date before she can add the page

All of the above is configured in the page type newsItem.

Available page types are listed in config.json. If you don't specify a page type for a page it gets the default page type included in all sites.

/shared/cms/config/config.json

{
  "pageTypes": {
    "default": {
      "require": "shared/cms/config/pageTypes/default.json",
      "visible": true
    }
  }
}

To add a new page type to your team's sites, add it in the team's config.json.

/shared/[teamName]/config/config.json

{
  "pageTypes": {
    "myNewsItem": {
      "require": "shared/[teamName]/config/pageTypes/myNewsItem.json",
      "visible": true
    }
  }
}

Then in that file you configure the page type itself. We start simple by defining how the new page type appears in the 'Add page menu', and how pages are sorted

/shared/[teamName]/config/pageTypes/myNewsItem.json

{
  "title": "News item",
  "addPageMenuTitle": "Add news",
  "navOrder": {
    "sortBy": "page.date",
    "order": "descending"
  }
}

Next, we add the fields shown in the 'Add page modal' and the 'Page properties panel'. Fields are divided into sections that can be opened/closed. Fields accept the following configurations:

• label - Label shown above field
• type - Field type
  • text - text field
  • textarea - multi-line text field
  • image - image picker
  • select - dropdown
  • date - date picker
  • template - template picker, shows all templates by default unless limited with optionsMode & options
  • page-selector - pick a parent page
  • display - not an editable field, just prints the value on the form. Used for help texts.
• visible - Field visibility
  • true - visible in both in Add page modal and Page properties panel
  • false - not visible anywhere
  • modal - visible in modal, hidden in panel
  • panel - hidden in modal, visible in panel
• datapath - Defines where field value is saved
• placeholder - Placeholder value, never saved
• modalClass - Field with in modal. Only allowed value is 'half'. Full width by default if not defined. In the Propertied panel field width is always 100%
• value - Default value, saved as value if not changed.
• autoFill - If field is autofilled when another field changes. False by default.
• autoFillPath - Where value is taken from
• optionsMode - Only used in template picker.
  • show - Only shows templates listed in options
  • hide - Shows all other templates except those listed in options
• options - for select fields
• required - Doesn't allow saving if field is empty
• help - Help text displayed under field
• editable - true by default, disables field if false

Below is an example of a newsItem page type. Template choices are limited to two and a news page is always created under /news. The configurations for section seoMetaData is left out to save space. You can find more examples of page types under /shared/cms/config/pageTypes

/shared/[teamName]/config/pageTypes/myNewsItem.json

{
  "title": "News",
  "addPageMenuTitle": "Add news item",
  "navOrder": {
     "sortBy": "page.date",
     "order": "descending"
  },
  "sections": {
    "general": {
      "title": "General",
      "fields": {
        "heading": {
          "label": "Heading",
          "type": "text",
          "visible": true,
          "dataPath": "page.title",
          "placeholder": "Write your heading here",
          "modalClass": "half"
        },
        "titleInNavigation": {
          "label": "Title in navigation",
          "type": "text",
          "visible": true,
          "dataPath": "page.navigation_title",
          "modalClass": "half",
          "autoFill": true,
          "autoFillPath": "page.title",
        },
        "template": {
          "label": "Template",
          "type": "template",
          "visible": true,
          "modalClass": "half",
          "optionsMode": "show",
          "options": ["news-one-column.html", "news-two-column.html"]
        },
        "date": {
          "label": "Date",
          "type": "date",
          "visible": true,
          "dataPath": "page.date",
          "modalClass": "half"
        },
        "parentPage": {
          "label": "Parent page",
          "type": "page-selector",
          "visible": true,
          "modalClass": "half",
          "editable": false,
          "options": {
            "path": "/news"
          }
        },
        "slug": {
          "label": "Slug",
          "type": "text",
          "visible": true,
          "dataPath": "info.slug",
          "value": {
            "from": "page.title"
          }
        },
        "pagePath": {
          "label": "Page path",
          "type": "display",
          "visible": true,
          "value": {
            "from": "info.pathlabel"
          }
        }
      }
    },
    "seoMetaData": {
      ...
    }
  }
}

TODO

TODO

Stuff still missing from the docs.

• Customising element properties
• Customising style properties
• Customising templates
• Making the content editable
• Extending Tidy
• The website object