âš
WARNING: Jatijm is just a demo and is likely to have breaking changes in the near future. Bugs and unexpected behavior are not rare. Many things that should be simple are not fully documented. If you like this version of Jatijm, visit the home page to enter your email to express support and be notified if/when a new version is released.
Get Started
Rich Text
Use the menu bar at the top to format text. The buttons are somewhat predictable**
. You can also enter markdown or HTML and then click the M↓ button to render the selected text.
Select text and make it a header by clicking the H button and then selecting the header level.
Make it bold, italicized, or underlined by clicking the B, I, or U buttons.
Make it a link by clicking the 🔗 button and adding the url.
Ordered or unordered lists can be created with the OL or UL buttons. Pressing tab or shift-tab should change levels as expected.
The :-: button aligns text either left, right, or center.
Click the C button and then input a programming language to add inline code or a code block with syntax highlighting.
Click the $ to render LaTeX.
The " button generates a blockquote.
To add an image, click the framed image button and input the desired parameters.
The ⌫ should remove any formatting for the selected text.
The up and down arrows move you to the beginning or end of the document.
Download HTML
When your content is complete, click the Save/Load button. Enter a file name and then click the Download HTML button in the popup. An HTML file with that file name**
Or that name with (1), etc. appended if the name is not unique
will be downloaded to your normal Downloads folder.Save/Load
To save your progress, click the Save/Load button. You have two options to save: download a zip file or save to browser. The text and any data for charts and tables will be included with either option.
If you save to browser, you can set the name of your project and it will be saved to your browser's localStorage. To load the file from localStorage you will need to use the same browser and the same URL. Each browser has a quota for this storage that is only like 5-10 MB. Download zip files and delete old files from the browser to save space.
If you download a zip file, then you can upload the zip later to any browser or send to someone else. The zip file includes the generated HTML file.
Table of Contents
In the top right of your screen, a + button toggles the table of contents. This outline is automatically generated by headings tags.
In editing mode, this outline allows you to skip to the desired place in your writing. In preview mode or in the final HTML, this outline skips to the desired section of the page.
Components
To add components to your text, click the desired button in the left dashboard and then follow the relevant instructions. Most components generate a new editor below the main editor while displaying something similar to the output inline where the component goes.
Sidenotes and Endnotes
Adding a sidenote**
A sidenote looks like this.
or endnote1 is simple. Click the sidenote/endnote button and then edit the content in the new editor.Endnotes will be numbered automatically and appear at the end of the article. Links to the endnote and then back to the original location should work.
Math
Add equations like with syntax. Just highlight the math and click the $ button at the top.
The syntax is rendered by so anything they support should be possible. Everything is rendered to HTML so that you only need to include the CSS file and not the JS file.
Code
Create a code block by clicking the code button at the top. Choose your language for syntax highlighting.
//This is a javascript code block, highlighted by prism.js
let x = 0;Or include inline code like
var x = 1; by highlighting the string of code and clicking the code button.Modals and Tooltips
A modal is a popup that takes up most of the screen. Just highlight some text that will serve as the link and click the
button on the left. A new editor will appear below so you can edit the modal content.
A modal can be formatted in any way that makes sense:
- bold
- italics
- math like
- images like
- code like
x = 0;
Or have tables, charts, etc.
A tooltip is a smaller popup that appears
Right here!
to the linked text. Highlight the link text and click the tooltip button. Then edit the content below. Like modals, it should be possible to include most components inside of the tooltip links and/or content.This content should slide down as you scroll.
âš
WARNING: On mobile devices, readers will have to scroll right to see side containers and they will not slide down.
Side Container
A side container is a bit like a sidenote but it follows a section of text as the reader scrolls down. If there is a graphic or piece of information that is important for the reader to have at hand while they are reading a few paragraphs, then side containers help make that possible.
Create a side container by clicking the Side C button on the left. Two pencils should appear in the main editor and a new editor will appear below. Everything inside of the pencils is part of the main text.
The new editor determines the content on the side. Just about any content other than sidenotes is possible.
âš
WARNING: Your side container should not be very tall. Clashes with future paragraphs will occur if the side is taller than the main content.
Full Container
This content should slide down as you scroll.
✔
SUCCESS: This box is temporarily pinned to the top.
A full container takes the same width as a normal paragraph but when it hits the top of the screen it stays there until a given amount of content scrolls past.
Create a full container by clicking the Full C button on the left. Two pencils should appear in the main editor and a new editor will appear below. Everything inside of the pencils is part of the main text.
The new editor determines the content on the side. Just about any content other than sidenotes is possible.
âš
WARNING: Your full container should not be very tall. Tall containers will leave very little room for other content.
Full Width
A full width component takes up more of the screen's width than a normal paragraph, but it does not slide.
Details and Carousels
The details component is a wrapper for the details/summary HTML tag that collapses content.
How to Add
How to Add
Highlight content and then click the Details button. Or just create a new element. Then edit the summary and details sections.
Where to Add
Where to Add
Just about anywhere, but lists do not seem to be playing nice at the moment.
Add a carousel to let the reader choose from several images or whatever. Carousels can can be in sidenotes**
if you have lots of notes. Click the carousel button to add a carousel element. Then in the new editor, enter the desired content separated by a line with at least three dashes (like ---). Create up to 20 sections with each section capable of containing images, charts, tables, or anything else.
First
Second
Third
Fourth
Chart
Charts rely on vega-lite so you should be able to create just about any chart. You will need to learn the proper syntax. Check out their example charts.
Click the chart button, upload a csv or json data file, and set the options to get your chart. The $schema will automatically be version 5 if you don't set it. The data will automatically be added from the csv or json. You can also leave the data field blank and manually enter or copy/paste an array of json objects into the data object in the options.
You set a width and/or height of the chart in pixels. The chart will automatically be constrained to a max width of 100% of its container and 75% of the screen's height. Generally it is possible to make charts that look acceptable in mobile and desktop sites, but they are not perfectly responsive at the moment. Setting the width/height of a chart to "container" to make it responsive will probably not work.
By default, the charts should look fine without including the vega-lite js files but they will not be interactive.
Table
You can use Github Flavored markdown table syntax for small tables. Or you can upload a csv and create a large table that will automatically be paginated. Then edit the header to change the names or alignment.
Alert
ⓘ
INFO: You can create info, success, and warning alerts.
✔
SUCCESS: Congrats on doing something.
âš
WARNING: Don't forget anything important.
Just highlight the text and then click the desired alert button. Or click the alert button and then add text inside the start and end brackets. Include formatting if you wish.
Custom
Create a custom component by clicking the Template button. Then click Add New at the bottom of the menu and choose a name for your component.
In the new textarea, input a mustache template. Then click the Content button and your component should be in the menu. Add it wherever you like by clicking the button and inputting a JSON object inside with the desired properties.
Settings
You can click the Settings button in the left sidebar to edit a few options.
- To make tabs work inside of textareas, click the Add Tab checkbox.
- To enable auto-save, click the autosave checkbox.
- To make iframes the default preview mode, click the iframe checkbox.
- To disable DOMPurify of your content, unclick the purify checkbox.
- To remove some components from the sidebar or reorder them, click the desired buttons
Templates
Click the Template button in the top left to edit the HTML template. You can change the template itself by pressing the Input button above the template textarea. The block will be where all of your content goes and the block will be where your table of contents ends up.
Template blocks can be added by including the appropriate mustache syntax. The content of the blocks can be edited by clicking the name of the block in the left sidebar. The base template should automatically be syntax highlighted, but any template blocks will be normal textareas.
Template blocks
You can add a title or description to your page by entering the desired text in the title or description textarea. You can add stylesheets by including a list of urls in the stylesheets textarea.
If you change the template, then any additional blocks will generate new textareas that you can edit as desired. You can add a block for scripts, a navigation menu, etc. A block can either require a string or a json object/array. Including functions within your objects will cause parsing errors.
When you save, the template is saved along with it so that you can save a template and then load it for each new article.
Preview
There are a few options for your preview mode that can be changed by clicking the settings button in the top left of the preview page. To get the best visual idea of what the final web page will look like, view the preview in an iframe by leaving the frame checkbox checked. If you want to check that internal links like the table of contents or endnotes work as intended you will need to uncheck to exit frame mode.
When using an iframe, you can set the width and/or height of the frame to see what your page looks like across different screen sizes. You can zoom out to see resolutions larger than your actual screen. If you do zoom out, the text and everything will be smaller than reality but there isn't really a way to exactly emulate a larger screen. The relative locations of everything should be accurate.
If you use relative links to images then they will not appear in the preview.
Future
This writer is still experimental and breaking changes are possible. UI improvements, documentation improvements, and bug fixes will happen gradually.
The focus for the near future is properly integrating the new rich text editor and eliminating as many bugs as possible. After that, the goal will be making it easier to customize and use. More and better template options will be added as they are developed.
1
An endnote looks like this.