lpirir / simpla

Simpla is a replacement for the CMS, built on Web Components

Simpla lets you build dynamic content in plain HTML. It's a collection of new HTML elements powered by a RESTful API. You use them to create, structure, and manipulate content in your code. No CMS needed.

They're built on top of the emerging Web Components spec. They look like this:

<simpla-text sid="text"></simpla-text>
<simpla-img sid="img"></simpla-img>

Read the full docs on simpla.io

Installation and setup

The easiest way to get started with Simpla is by using the simpla.io platform. Create a free project, then include this library and call Simpla() with your project ID

<script src="https://app.simpla.io"></script>
<script>
  // TODO: Enter project ID
  Simpla('PROJECT-ID');
</script>

You can also install Simpla locally with Bower

$ bower install simpla --save

Setting options

Simpla is configurable via the Simpla() initializer

Simpla({
  project: 'PROJECT-ID',
  api: 'https://api.simpla.io',
  ...
});

Read more about available options

Usage

Drop Simpla's new HTML elements into your code wherever you want editable content.

• Use <simpla-text> for editable text

• Use <simpla-img> for editable images.

Every element must have a unique Content ID (usually contained in the sid attribute) and both opening and closing HTML tags.

<simpla-text sid="my-text"></simpla-text>
<simpla-img sid="my-img"></simpla-text> 

Structuring data

Simpla structures data on the fly. This means with you can create powerful dynamic content, without a CMS. Build blogs, localize content, personalize user journeys, all with just HTML and Javascript.

Use <simpla-block> to create namespaces for content

<simpla-block sid="block">

  <!-- This 'text' is scoped to 'block' -->
  <simpla-text sid="text"></simpla-text>

</simpla-block>

Dynamically set the sid of elements to fetch different content. For example, build a simple fontend blog

<simpla-block gid="blog">

  <!-- Post ID set by js -->
  <simpla-block id="post" sid="">
    <simpla-text sid="content"></simpla-text>
  </simpla-block>

</simpla-block>

<script>
  // Get post slug from URL
  var slug = window.location.pathname.split('blog/').pop();

  // Set post ID to slug
  document.querySelector('#post').sid = slug;
</script>

Read more about using Simpla

Editing content

Simpla doesn’t have any admin areas or forms. Content editors can work inline without breaking things, and there's a JSON API for developers.

Just add #edit to the end of your URL (eg: https://mysite.com#edit) and login to start editing your content. When you’ve finished press save to publish your changes. Remove #edit from the URL to exit edit mode.

Try the demo on simpla.io

--

MIT © 2016 Simpla International