Built-In Features

Math (KaTeX)

LaTeX math formulas can be added inline so they read naturally with your prose or as their own block when you want them to stand out. KaTeX handles the rendering so your equations always look crisp at any size. Here is an inline example: . And here is a block example:

KaTeX Math Guide

Diagrams (Mermaid)

Mermaid turns plain text into rendered diagrams. Flowcharts, sequence diagrams, and more can all be written directly in your HTML and JamsEDU will render them on the page for you.

flowchart LR
    Idea[Author writes text] --> Render[JamsEDU renders]
    Render --> Polish[Theme + layout]
    

sequenceDiagram
    participant S as Student
    participant P as Page
    S->>P: Updates a field
    P-->>S: Keeps structure + print-ready layout
    

Mermaid Diagrams Guide

Code Highlighting

Wrap a code element in a pre tag and add a language class on the code element (for example html or javascript). Highlight JS Lite will automatically tokenize it with theme-aware colors, optional line numbers, and a copy button when enabled.

        function sum(a, b) {
            return a + b;
        }

        const total = sum(10, 32);
        console.log(total);
    

The same integration can turn a block into an editable mini editor, pin syntax highlighting with a locked language on the code element, and include extra text in the clipboard when you place template elements next to the pre. The guide below spells out the classes and shows each pattern.

        // This block is a mini editor: try editing the code below.
        const greeting = 'Hello, HLJSL';
        console.log(greeting);
    

Highlight JS Lite Guide

Rich Text

Any textarea with the class rich becomes a lightweight Rich Text editor with a toolbar for bold, italic, underline, bullet and numbered lists, paragraph and heading levels, blockquote, code blocks, and link insertion. The output stays as HTML in the textarea value and the Rich Text editor inherits your light or dark palette automatically. Per field options are documented in the Rich Text guide.

Rich Text Guide

Tiny Doc

Tiny Doc is a structured document system built into JamsEDU. It provides sections, headers, repeatable rows, URL pickers, Rich Text areas, and print or save functionality all from within the document itself. This is not the same as embedding an existing PDF for students to read in the page; that is the separate Embedded PDF built-in.

Tiny Doc Guide

Embedded PDF

Put a PDF on the page the same way you would link any other file: one line of HTML with the URL. JamsEDU notices it and swaps in an in-page reader so people can scroll, zoom, and read without leaving your site. Point data-pdf at a path you actually publish (for example under /assets/docs/).

        <div data-pdf="/assets/docs/your-handout.pdf"></div>
    

You can also use a plain embed tag whose src ends in .pdf; sizing, titles, and extra options are on the full guide page.

Embedded PDF Guide

Responsive Video

JamsEDU can embed videos from supported hosts like YouTube and Vimeo using a simple video element with a src attribute pointing to the video URL. During the build, JamsEDU replaces this with a responsive figure containing the correct embed iframe so the player scales with your layout automatically.

You can also include a cite element inside the video tag. JamsEDU will turn the cite text into a link pointing to the same URL as src so readers can open the original video on the host site.

        <video src="https://youtu.be/NpEaa2P7qZI">
            <cite>Your visible citation label</cite>
        </video>
    

Theming and Color

All built-in features read CSS custom properties first, shared tokens second, and sensible defaults last. This means a single palette file can recolor Tiny Doc, Rich Text, the code highlighter, and the embedded PDF viewer so your branding shows up consistently across the entire site.

        /* Example: adjust built-in surfaces to match your brand */
        :root {
            --doc-link-color: #0b57d0;
            --richtext-border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
        }
    

CSS and Theming Guide

Optional Settings

Built-ins start on their own when the page contains the markup each loader looks for. To change runtime behavior (CDN URLs, toolbar wording, PDF zoom limits, disabling a loader), edit the plain object passed to initJamsEdu in /assets/js/main.js. In the template it is usually named jamsEduConfig: set only the fields you care about for each built-in; anything you omit keeps the shipped defaults. Set a top-level key to false to turn that loader off entirely. None of this is read from .jamsedu/config.js; that file is only for the CLI builder.

Each top-level key is either an options object (include only the keys described for that feature) or false to skip that loader entirely:

• tinyDocument — Tiny Doc (.document worksheets)
• tinyWysiwyg — Rich text (textarea.rich); docs call this feature rich text
• katex — Inline and block math
• mermaid — Diagrams from pre.mermaid
• highlightJsLite — Highlighted fenced code
• embedPdf — Embedded PDF viewer (not Tiny Doc print or save)

Individual guides call out the keys that matter for that feature (for example jamsEduConfig.embedPdf on the Embedded PDF page). Loaders already attach a MutationObserver when useMutationObserver stays enabled (the default). For your own scripts, the bundle exposes window.DomWatcher in assets/js/jamsedu/dom-watcher.js: use DomWatcher.watch(selector, callback) when you inject matching markup after load (for example after a fetch).