Compare substance to alternatives

[guilhermeaiolfi]

Hi,

I'm in the process of choosing one of the following frameworks: substance, quill, prosemirror, slate.

It would be nice to have in the home page a comparative between Substance and alternatives. I would like to know what exactly you see as the main differences between those projects.

The app I'll be working on will be a Document Management System where documents will be stored as structure data and made available to users to edit in a WYSIWYG fashion. It very close to what the Texture project is doing.

My current thought about each of them:

Substance: the most powerful of them. It doesn't assume you are importing from one format and exporting to another, I mean, using converters you can use whatever you like: JSON, XML, etc. More complicated to get started. Docs are not great, it could be a lot better. It doesn't seem "production-ready" in the sense of a public open source project, maybe because it doesn't reach v1.0? Maybe that's one of the reasons why it's the less known of all, which is a shame considering how good the code seems to be. It has building blocks like sidebar, toolbar, menus so you can create the UI the way you want it without too much code.

quill: most popular of all. Good docs. It seems very well thought and simple. The thing I don't like is that their model is based on operations (Deltas) and not on state. 'parchment' creates a state representation of your model, but it seems to be a in-memory representation and (at least) not meant to import and export from/to it. It's very easy to get started and have something working, tho.

ProseMirror: it seems like a very capable framework, but looks less flexible (i may be wrong in this one). It has built-in change tracking, something I would need. Its schema validates you document which is a nice feature to have (allowing/denying structures based on an RegEx-like representation). Good docs.

slate: popular, flexible, easy to setup and customize but too coupled to react. It has it's own model representation based on JSON and it seems you can't use other formats. You'd need to export/import to/from their JSON format if you would like to use another format.

[guilhermeaiolfi]

Looking closer, it seems that substance has a versions and changes tracking system. Still hard to figure it out how all the pieces come together. Are you guys planning on writing docs for the 1.0 release? I couldn't find any mention to it in the roadmap nor issues.

[MGDSoft]

+1

[StorytellerCZ]

I would like to add Draft.js from Facebook to that comparison list. I will try to migrate from it to Substance. Draft.js is limited to React as it uses React and its built-in functionality. It uses its own JSON format so I will have to figure out some migration script. Another downside of Draft.js is that you need to build all of the UI and most of the functionality yourself (though you have packages to help with that), so it takes a lot of effort to get something basic up and running, but on the other hand, you can customize it pretty well.

[kilburn]

The big issue with Draft.js is that it doesn't support mobile browsers, and althrough their documentation states that they are working on it, they have stated that they (facebook employees) are not working on it and won't be. Search for "android" or "ios" in their issue tracker and you'll see what I mean.

On the other hand, substance is not very mature either. It currently only works well on Chrome desktop, but at least they haven't said it is not a goal of this project to support mobiles....

[jabbermarky]

@guilhermeaiolfi - what did you decide to use? I too am evaluating WYSIWYG editors for an app that I am building.

[guilhermeaiolfi]

I haven't reached the part where something like substance would be handy. But for the tests I've made so far, substance would be my choice. I'm interested in other conclusions as well. Em 9 de fev de 2018 12:29, "Mark L" <[email protected]> escreveu: @guilhermeaiolfi <https://github.com/guilhermeaiolfi> - what did you decide to use? I too am evaluating WYSIWYG editors for an app that I am building. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1127 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAPhmO8_VMVTH8TP2E2Pp8pRrXthXasjks5tTFZlgaJpZM4PykoO> .

[jabbermarky]

I have a few needs - I'm not yet sure how Substance supports them.

• I need a text editor that I can embed into an EmberJS app, so embedding needs to be supported. The app is not just an editor, so the editor is not the thing.
• I need to import and export text into the editor.
• I need to save/load the text into a database.
• I am not using React, so I'd rather not include that kitchen sink in my application.
• I need it to be extensible so that I can create my own custom features. Specifically, I need to select some text and then create a new object based on that text. Similar I guess to the footnotes and citations examples in Texture project.
• I need support for '#hashtags'.
• I need support for '@mentions'.
• I need support for embedded tables.
• I need an open source solution that is actively maintained in 2018.

[kilburn]

First, notice that I appear as a contributor because I made a pull request that got merged, but I am not affiliated with this project in any way.

Now I'll try to cover your points:

I need a text editor that I can embed into an EmberJS app, so embedding needs to be supported. The app is not just an editor, so the editor is not the thing.

That's how I'm using substance. I built a customized version of the editor as a separate project, and then use that as an npm module in my app.

I need to import and export text into the editor.
I need to save/load the text into a database.

These are closely related. I'm doing it without much trouble, with a benefit and a drawback. I'm sending just the editor's JSON representation of the document to my backend service. That service renders the HTML itself and caches it (validating the input in the process, and making XSS injections impossible without requiring any complicated HTML purification/whitelisting libraries). It works very well, but there's the added work of coding the renderer server-side.

I am not using React, so I'd rather not include that kitchen sink in my application.

Substance doesn't use React. Nonetheless, React weighs in at 100Kbs minfied but not gzipped. By comparison, my customized version of substance weighs 550Kbs minified but not gzipped. I haven't made any serious effort at trimming that size yet, but I don't expect an order of magnitude reduction. What I'm trying to say here is that a proper editor is going to be heavy, and whether it uses react or not should most probably not be an important point.

I need it to be extensible so that I can create my own custom features. Specifically, I need to select some text and then create a new object based on that text. Similar I guess to the footnotes and citations examples in Texture project.
I need support for '#hashtags'.
I need support for '@mentions'.

All "editor framework" projects either directly support that, or provide the "hooks" to build the functionality yourself. This includes Substance, but also ProseMirror, Draft.js and probably some others.

I need support for embedded tables.

Same as above, but probably in a "sadder" state. Tables are hard.

I need an open source solution that is actively maintained in 2018.

I can't speak about the others, but Substance is maintaned according to my own experience. I just started tinkering with it last week, found some issues and opened tickets/PRs. All of them were replied and/or handled promptly, so kudos to you devs!