simplajs / Simpla

Simpla is a modular content system for frontend developers, built on Web Components.

At a glance, it lets you:

• Build with standard HTML & JS
• Edit content (safely) inline
• Use Github as your backend
• Work in any stack or framework
• Push everything as JSON data to a static CDN
• Define content models in the DOM
• Assemble your own lightweight CMS

It looks like this:

<!-- Block of editable richtext -->
<simpla-text path="/text"></simpla-text>

<!-- An editable image -->
<img is="simpla-img" path="/img">

<!-- Dynamic collection -->
<simpla-collection path="/gallery" as="photo">
  <template>
    <img is="simpla-img" path="/gallery/[photo]/img">
    <simpla-text path="/gallery/[photo]/caption"></simpla-text>
  </template>
</simpla-collection>

<!-- And many more components -->

Installation

Simpla is available on NPM and Unpkg as simpla.

npm i simpla

Import the core library and an OAuth adapter, and call Simpla.init

// Import Simpla and OAuth adapter
import Simpla from 'simpla';
import SimplaNetlify from 'simpla/adapters/netlify';

// Init Simpla
Simpla.init({

  // Github repo to store content in
  repo: 'username/repo',

  // Adapter to authenticate users with Github
  auth: new SimplaNetlify({ site: 'mysite' }),

  // Public URL of your content (optional)
  source: 'https://mysite.netlify.com'

});

// Add Simpla to window global for components to access
window.Simpla = Simpla;

Simpla and its adapters export UMD modules, so you can also link to them with <script> tags and use the globals directly.

Simpla uses web components to manage content, the library itself is just a tiny (~4kb) core to an expansive ecosystem. Install and add components to your page with Bower and HTML imports (NPM/JS support coming soon). You can find components in the elements catalogue.

$ bower i simpla-text simpla-img simpla-admin --save

<link rel="import" href="/bower_components/simpla-text/simpla-text.html">
<link rel="import" href="/bower_components/simpla-img/simpla-img.html">
<link rel="import" href="/bower_components/simpla-admin/simpla-admin.html" async>

You should also include a web components polyfill for full cross-browser support (see the browsers Simpla supports).

<script src="https://unpkg.com/[email protected]^0.7.24/webcomponents-lite.min.js" async></script>

See full documentation & API references

Contributing

There are lots of ways you can help push the Simpla project forward:

• Reporting bugs. If you find a bug please report it! Open an issue against this repository for problems with the core library. For problems with elements, open an issue against the element's repository.

• Submitting Pull Requests. We ❤️ PRs! Your PR should address an existing issue or have been discussed previously to ensure it gets merged.

• Publishing new components Simpla is a community driven project, and the best way you can contribute is to build your own content components. The ecosystem is built on Web Components, but there's no reason you couldn't use Simpla in a component environment of your choice (React, etc).

Read the Contributing guidelines for more information.

MIT © 2017