Get Started

Markdown

Jatijm includes a markdown renderer so just write some markdown in the textarea. Then click the Preview button in the top left to see the rendered content. When you wish to make edits, click the ✏️ in the top left and add more text. The Marked renderer is used and supports most CommonMark and Github Flavored syntax.

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 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. You can also upload a .md or plain .txt file. 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.

Sidenotes and Endnotes

Adding a sidenote³³ A sidenote looks like this. is as simple as including the text inside of {{#sidenote}} and {{/sidenote}}. They will be numbered automatically and appear in the right margin.

Add an endnote¹ by including the text inside of {{#endnote}} and {{/endnote}}. They will be numbered automatically and appear at the end of the article. Links to the endnote and then back to the original location are included.

Math

The syntax is rendered by $\text{KaTeX}\backslash KaTeX$ so anything they support should be possible. Everything is rendered to HTML so that you only need to include the $\text{KaTeX}\backslash KaTeX$ CSS file and not the JS file.

Code

Code that is inside of a fenced code block will be highlighted by PrismJS. Start a fenced code block on a new line with ~~~ followed by the language. Then include your lines of code and finish with a line that is ~~~. Alternatively, you can use 3 tick marks (```) instead of 3 tildes.

~~~javascript
var x = 0;
x++;
console.log(x);
~~~

The above code will become:

var x = 0;
x++;
console.log(x);

The code will be syntax highlighted to produce HTML so that you only need to include the Prism CSS file.

For inline code, include the code inside of 1 tick mark so `var x = 0;` becomes var x = 0;. This code is not highlighted, however.

Modals and Tooltips

A modal is a popup that takes up most of the screen. Include the linkThis is a modal. text inside of {{#modal.link}} and {{/modal.link}} followed immediately by the content inside of {{#modal.content}} and {{/modal.content}}.

You should be able to include markdown and most components inside of a modal link and/or its content. $\text{LaTeX}\backslash LaTeX$$\frac{\sqrt{2}}{2}\backslash frac\{\backslash sqrt\{2\}\}\{2\}$ links are not underlined but they are possible. A small image in a sidenote⁴⁴ can become large when clicked.

A tooltip is a smaller popup that appears nextnextRight here. to the linked text. Just include the link text inside of {{#tooltip.link}} and {{/tooltip.link}} followed immediately by the content inside of {{#tooltip.content}} and {{/tooltip.content}}.

Like modals, it should be possible to include most components inside of the tooltip links and/or content.

Full Container

Full Width

A full width component takes up more of the screen's width than a normal paragraph, but it does not slide.

var x = 0;

Details and Carousels

The details component is a wrapper for the details/summary HTML tag that collapses content.

Add a carousel to let the reader choose from several images or whatever. The following code snippets come from the Hello World Collection.

// Hello World in C++ (pre-ISO)

#include <iostream.h>
main()
{
    cout << "Hello World!" << endl;
    return 0;
}

// Hello world in JavaScript

console.log("Hello World");

# Hello world in Python 3 (aka Python 3000)

print("Hello World")

# Hello World in R
cat("Hello world\n")

# Hello world in Julia

println("Hello, World!")

-- Hello World in Haskell
 
main = putStrLn "Hello World"

% Hello World in MATLAB.

disp('Hello World');

# Hello World in Lua

print "Hello world"

<?php
  // Hello world in PHP
  echo 'Hello World!';
?>

// Hello world in TypeScript

alert('Hello world!');

% Hello World! in LaTeX
\documentclass{article}
\begin{document}
Hello World!
\end{document}

// Hello World in Java

class HelloWorld {
  static public void main( String args[] ) {
    System.out.println( "Hello World!" );
  }
}

<HTML>
<!-- Hello World in HTML -->
<HEAD>
<TITLE>Hello World!</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

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. If you create a table by uploading a csv, then what appears in the editor will look like the below code:

{{#table.info}}
t46149
| Location | 2010 Population | 2020 Population | 2010-2020 Growth |
| --- | --: | --: | --: |
{{/table.info}}
{{#table.preview}}
| United States | 308745538 | 331449281 | 7.35% |
| South | 114555744 | 126266107 | 10.22% |
| West | 71945553 | 78588572 | 9.23% |
| Midwest | 66927001 | 68985454 | 3.08% |
| Northeast | 55317240 | 57609148 | 4.14% |
| California | 37253956 | 39538223 | 6.13% |
| Texas | 25145561 | 29145505 | 15.91% |
| Florida | 18801310 | 21538187 | 14.56% |
| New York | 19378102 | 20201249 | 4.25% |
| Pennsylvania | 12702379 | 13002700 | 2.36% |
{{/table.preview}}

The table.info block includes a unique id for the table data followed by a header row and then the markdown formatting row. Then there is a table.preview block with the first page of data. Changing this preview data will have no impact on the final table. All data is loaded from the original csv. Do not change the id of the table or the data will no longer be connected.

You can change the header row. Shorten, lengthen, capitalize, or completely change the column names to whatever you wish. You can also change the alignment of each column by changing the formatting row as per the Github flavored specs. Left alignment is :-- (or the default ---), right alignment is --:, and center alignment is :-:.

Alert

You can create info, success, and warning alerts. For now the syntax for an info alert is to write {{#alert.type}}info{{/alert.type}} and then wrap the content inside of {{#alert.content}} and {{/alert.content}}. Replace the word "info" with "success" or "warning" for green or red alerts.

Custom

You can create custom components from the templates page. Click the Add New button in the left sidebar and pick a name. Then enter the mustache template in the new textarea⁶⁶ The textarea should automatically be syntax highlighted. with that name. If you don't know mustache syntax, go here.

Then simply add a block anywhere by wrapping a string or JSON object inside of {{#custom}} and {{/custom}} where the word custom needs to be replaced by the name of your block.

If you just add a string to your block then you need one or more {{input}} blocks inside of your component template where that text will go. If you include a JSON object then the keys will pair up as expected. Using {{.}} is the mustache syntax for an item in an array.

As an example, here is a simple to-do list component. Create a component named todo and then add the following template to the todo textarea.

<div style="width: 50%; display: block; margin: auto;">
<div style="border: 1px solid black;">
    <center><b>{{ title }}</b></center>
</div>
{{#items}}
<div><input type="checkbox" />{{.}}</div>
{{/items}}
</div>

Then add blocks like the following anywhere you want a checklist.

{{#todo}}
{
"title": "Steps to add custom component",
"items":["Enter name on template page.",
        "Add template for component.",
        "Add object block wherever you want."]
}
{{/todo}}

The result will be a simple checklist:

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 {{ content }} block will be where all of your content goes and the {{ toc }} 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 a demo and breaking changes are possible. UI improvements, documentation improvements, and bug fixes will happen gradually if at all.