Build your own editor with Substance

Substance is a library for creating web-based WYSIWYG editors with all the features you would expect.

As opposed to other existing editors, such as TinyMCE, Aloha etc. Substance is not just a widget you include into your web app. It is a library. Widgets are often not good enough. They lead to a bad UX. They are like alien isles within the web-app. And those are very limited regarding customization.

The unique point of Substance is Customizability. You can customize everything. And we make this as simple as possible for you.

Lens, a scientific content production suite built with Substance.

Building an editor starts with the data. For instance, a scientific article is more complex than a blog post. Still, there is some similarity. Both of them have paragraphs, for instance. In Substance you define a schema, containing a set of Node descriptions.

function Todo() {
  Todo.super.apply(this, arguments);
}
TextBlock.extend(Todo);
Todo.static.name = 'todo';
Todo.static.defineSchema({
  content: 'text',
  done: { type: 'bool', default: false }
});

Probably you are already using a certain data format, XML files or HTML. With Substance you can create a custom converter very easily.

module.exports = {
 type: 'todo',
 tagName: 'div',
 matchElement: function(el) {
   return el.is('div') && el.hasClass('todo');
 },
 import: function(el, node, converter) {
   node.content = converter.annotatedText(el, [node.id, 'content']);
   node.done = el.attr('data-done') === '1';
 },
 export: function(node, el, converter) {
   el.append(converter.annotatedText([node.id, 'content']))
     .addClass(‘todo’)
     .attr('done', node.done ? '1': '0');
 }
};

You can customize many more things: how content get rendered, toolbars with individual tools, content transformations… Check out the examples to get started.

What makes Substance unique?

• Produce and edit HTML, XML, or any kind of content format
• Multiple editing surfaces (e.g. one for the title, one for the document body)
• Annotations can span over multiple paragraph
• Reusable components (SplitPane, ScrollPane, ContainerEditor, Toolbar, …)

For a complete list of features see here.

Who is using it?

Substance has been used to power a scientific reading tool called eLife Lens, which is used by eLife, the American Mathematical Society and other publishers. From that evolved a scientific editor called Lens Writer. Substance is also used to power digital archives with Archivist, data-driven documents at Stencila and News editors at Infomaker.

Most importantly Substance will be a main building block of PubSweet, the decoupled full-featured content production system initiated by our friends at Coko.

When is it ready?

Use it now. We just released Substance 1.0 Beta 3. The API is fairly stable and most interfaces are documented. There will be two more beta releases, complementing the features before we freeze the API for a 1.0 release in April 2016.

Real time Collaboration?

Collaborative editing will be supported in the next beta version, supposedly ready in February 2016.

How much?

Substance is completely free and available as Open Source under an MIT license.

How do I get started?

As a web-developer, jump right over to the examples and learn how to define a custom article, write an HTML converter for it and build an editor component.

Tell us about your experiences and let us know what you liked and what’s missing to solve your use-case. We’re glad for feedback and contributions in any form.

Happy editor building!

http://substance.io

(follow up of Coko article)