The ORY Editor is an highly extensible WYSI (what you see is) layout editor for rich HTML content (rich text, videos, applets, tables, twitter feeds, ...). If you are fed up with the limitations of contenteditable, you are in the right place.

The ORY Editor is used at Germany's largest (~800k uniques per month) E-Learning Website www.serlo.org to improve the wiki experience.

We use the ORY Editor for ORY Sites, a tool for creating websites. It's similar to squarespace, but it works offline, the sites you created are stored on your device, and you are able to add your own layouts and plugins to it.

Check out our demo at editor.ory.am!

Please Note: The features, APIs and docs of the ORY Editor are new and very young. We cannot always guarantee backwards compatibility but we try our best! We are looking for your help also to find issues and improve the overall experience, APIs and documentation.

• Introduction
  • What makes it different?
  • ORY Sites
• Quickstart
• Documentation
• How to run, develop, and contribute
  • Install dependencies
  • Run the example(s)
  • Run the toolchain
  • Run the documentation
• Known issues

We have been running the Wikipedia for learning for almost a decade now. The experience and the lessons learned made us embark on the journey to build the ORY Editor. We wanted to make content editing on the web easy and enrich the Open Source Community with technology that moves the needle significantly for how content is created and edited on the web.

In contrast to WYSIWYG editor such as TinyMCE or CKEditor we do not rely on html for state serialization, but instead use a well-defined JSON structure and a predictable state container called redux. All state transformations are unit-tested for correct behaviour and replayable - making collaboration and global undo / redo possible.

We felt that popular open source WYSIWYG editors fail to provide a decent layout solution. We observed authors who regularly use invisible tables with fixed widths for layouts - a work around that breaks your content on devices with small screens. Site builder plugins for popular CMS solve this sometimes, but there is no good open source alternative.

Most WYSIWYG editors force too much functionality into contenteditable, such as tables, twitter cards, youtube videos and more. The ORY Editor is built plugin-first - every layout and content is a plugin. And plugins are simple React Components, that you can write yourself.

We are building a platform called ORY Sites for creating, managing and publishing websites. In contrast to existing providers such as squarespace.com, wix.com, and others, you have all your content stored locally. The build is static html, css and client-side javascript and you are free to host it on ORY Sites, GitHub Pages, AWS S3, or anywhere you like.

Because ORY Sites comes with a desktop app, it even works when you do not have internet connection. The app is built on top of the ORY Editor, allowing you to integrate plugins you write yourself, or plugins from third-parties. The ORY Sites app is completely free and we provide paid services that save you time and money.

Compared to popular open source content management systems like drupal or wordpress, there are no security updates necessary, because ORY Sites uses plain html files to serve your site - no SQL or XSS injections possible. Yet, content, layout and behaviour is very customizable.

If this caught your attention, sign up for our newsletter and get an exclusive beta access to the ORY Sites App!

>> Join Newsletter <<

Currently our focus is on optimizing the ORY Editor for usage with React. We will work on, and ship versions that do not require React in the future. Please check the ReactJS tutorial!

$ npm install --save ory-editor

Note: The ory-editor package is a metapackage. It includes the core, our default ui and some plugins we officially support. Use this package primarily for convenience.

Check out the user guide on gitbook.

Do you want to run, develop or contribute to the ORY Editor? For that you need Node installed on your system. Use git to check out this repository as followed.

$ git clone https://github.com/ory/editor.git
$ cd editor

The ORY Editor is a monorepo that you initialise with:

$ npm i

Here are some examples that are a good starting point if you want to familiarize yourself with the editor. To run the examples, use one of the following commands:

$ npm run start

Our toolchain contains tests, eslint and flow types. We highly recommend to run this toolchain while developing.

# run the tests in watch mode
$ npm run test:watch

# run eslint in watch mode
$ npm run lint:watch

# run flowtype in watch mode
$ npm run flow:watch

To run the docs in watch mode, do:

$ npm run docs:watch

To build the docs, run:

$ npm run docs

We keep track of known issues in the issues tab.