StoryCell is a web editor that provides user with tools for writing and organizing stories in so-called cells. The user can add cells in the desired order, hide or remove them, and create inner-cells(or subchapters) of a story. The design of the website is mobile-friendly an is accessible through all the modern browsers.
The tool is available via this link.
StoryCell is a simple editor with next features:
- Organize your stories with cells
- Set custom color theme
- Paste images
- Place chapters in the desired order
- Import and export stories as JSON
The project is being frequently updated, so there is going to be a lot more features! These include creating a multi-story project, tabs interface, user registration, cloud storage feature and more.
The interface of the StoryCell editor is very simple and intuitive.
-
Adding cells.
On the start you see a chapter with a default message. You can remove To add new chapter you can click the next buttons:
- add a cell above
- add a cell below
- add a cell inside
-
In the created cell you can write text, paste images and paste any stylized html elements you want.
-
To remove a cell you can click
. When there is no cells left, the message appears. Click on a message to create a first cell. -
On the left there is menu button. The menu sidebar contains the next options:
- Load a story from device and edit it.
- Download story to your device as JSON file.
- Set any color theme you want with a color picker.
- Easily collapse the unused cells by clicking on the small arrows.
StoryCell saves stories in accessible human-readable JSON-files. The structure of saved data is shown below.
| Property | Description |
|---|---|
| title | The title of document |
| chapters | Array of Chapter objects |
| colorTheme | The color theme of document |
And each Chapter object is structured like:
| Property | Description |
|---|---|
| title | The title of chapter |
| text | The contents of chapter |
| children | Array of derived Chapter objects |
As you can see this structure is tree-like and is visually understandable.
StoryCell is supported by all modern browsers and uses the standard tools:
- HTML
- CSS
- JavaScript
For production environment I've used the Microsoft Visual Studio Code and for the cross-platform testing the website I've used BrowserStack. For the hosting platform I've chosen Netlify.