Tiny Doc

Wrap your content in <div class="document"> to create a Tiny Doc. JamsEDU automatically sets up URL field dialogs, repeating template sections, and a Download as PDF button. Content marked with the instructions class is excluded from the PDF export.

The PDF export turns the document itself into a downloadable PDF. If you want to embed an existing PDF file on a page for reading, that is a separate feature covered in the Embedded PDF guide.

You can customize how Tiny Doc behaves by editing jamsEduConfig.tinyDocument in assets/js/main.js. Set only the properties you need and anything you omit will use the default values. To disable Tiny Doc entirely, set the whole key to false. For more on how jamsEduConfig works across all built-ins, see Optional Settings.

useMutationObserver: When true (default), new .document elements added to the page after load are automatically initialized through the shared DOM watcher. When false, only documents present in the DOM at load time are set up.

Layout classes

These are the structural pieces authors use most often. JamsEDU rewrites them to predictable doc-* classes for styling and print.

Your class	Live class	Role
`title`	`doc-title`	Document heading
`header`	`doc-header`	Often a name and date row
`section`	`doc-section`	Major section label
`subsection`	`doc-subsection`	Smaller subheading within a section
`context`	`doc-context`	Guidance kept as a light emphasis in PDF output
`instructions`	(preserved)	Guidance omitted from PDF output
`spacer` / `indent`	`doc-spacer` / `doc-indent`	Vertical rhythm and indentation
`center`	`doc-center`	Center elements text
`inline` (field modifier)	(preserved)	Keeps the field inline with sentence text
`bold` (field modifier)	(preserved)	Wraps exported value in `<strong>`

Use instructions when text is author guidance that should be hidden from the PDF. Use context when the text should stay visible because it helps preserve the context for answers the user is providing.

Single live example

The block below is one document that mixes plain fields, a URL row, a repeatable list, rich text, and a file input so you can try export and dialogs in one place. For every other pattern (nested repeatables, raw URL-only fields, US-style dates, multiple files), use the field reference.

Short Lab Report

Summary

Use this section to capture the result in plain language, then cite sources inline in the next row.

Instructions for the student only; this paragraph does not appear in the exported PDF.

References in Sentence Form

Use the first inline field for a labeled citation; the second uses data-raw; the third uses a fixed label with data-fixed-text.

This summary follows and aligns with the canonical method at and the required policy link at for final verification.

Team Members

Notes (Rich Text)

Video Link Verification

I chose to study and teach about: . I have uploaded my video to and verified in a private browsing window that anyone with the link can view it without needing to request access or sign in.

You may view the video online at:

Optional Photo

When the worksheet is complete, use Download Document as PDF.

Field and option reference

Copy the shapes below into your own .document and adjust labels. URL fields share one element type; attributes choose how the dialog and display behave. Text and select fields can also use inline and bold for sentence-flow forms.

URL inputs

Label Plus URL (default): Optional placeholder names the row; prompt is the dialog helper text.

        
            <input type="url" placeholder="Issue title" prompt="Link to the ticket">

URL Only (data-raw): Dialog and stored value stay on the bare URL.

        
            <input type="url" data-raw placeholder="https://…">

Prefilled Display: Seed the picker with data-url and optional data-text for the visible label.

        
            <input type="url" placeholder="Safety office"
                data-url="https://example.org/safety" data-text="Campus safety">

Forced Label (data-fixed-text): Lock the display text and let users provide only the URL. Tiny Doc keeps the fixed label for display and export. If prompt is omitted, the fixed label is used as the dialog heading.

        
            <input type="url" data-fixed-text="Safety Policy" prompt="Paste the policy URL">

        
            <input type="url" data-fixed-text="District Policy">

Demo Showing all URL input combinations

This second form includes every URL input mode in both block and inline form so you can compare dialog behavior and rendered spacing.

URL Input Combinations

Block Rows

Label Plus URL

URL Only (data-raw)

Prefilled Display

Forced Label

Forced Label Without Prompt

Inline Sentence Rows

A labeled inline citation should stay in line with this sentence.

A raw inline URL can also remain in flow.

A prefilled inline label is rendered with the same inline treatment.

A forced inline label keeps fixed link text while users provide only the URL.

A forced inline label without a prompt uses the fixed label as the dialog heading.

Inline text and select fields

Tiny Doc treats fields inside a paragraph as inline by default, and explicit inline also works on text, URL, and select fields. Add bold when you want final PDF output wrapped in <strong>.

        
            <p>
                I chose to study:
                <input class="bold" type="text" placeholder="Topic title">
                and uploaded to
                <select class="bold inline" placeholder="Select a platform...">
                    <option>Dropbox</option>
                    <option>Google Drive</option>
                    <option class="alt">Other (please specify)</option>
                </select>
            </p>

When placeholder is present on a select, Tiny Doc inserts a placeholder option first. If it remains selected, export treats the field as [Not Provided]. If an option has class alt, Tiny Doc adds a companion text input while that option is selected and removes it when the user changes away.

Repeatable blocks

Put a <template> first, then the very next sibling must be <button class="template" type="button">. Cloning re-runs Tiny Doc wiring on the new fragment. Nested repeatables use the same pattern inside a template's markup.

        
            <ul>
                <li><input type="text" placeholder="Row"></li>
                <template>
                    <li><input type="text" placeholder="Row"></li>
                </template>
                <button class="template" type="button">Add row</button>
            </ul>

Dates, files, rich text

Use normal input type="date". Add class us when you want US-style presentation where supported.

        
            <input type="date" class="us" aria-label="Due date">

Files: single file or multiple on the same control type; images in the document can flow into print when the browser allows.

        
            <input type="file" accept="image/*">
            <input type="file" multiple>

Rich text: same as the site-wide rich text feature: textarea with class rich. See the Rich Text guide for toolbar options and jamsEduConfig.tinyWysiwyg.

        
            <textarea class="rich" rows="4"></textarea>

Styling

In a standard JamsEDU app that keeps the built-in theming stack, Tiny Doc automatically follows the same light and dark palettes as the rest of your site. If you need to customize the worksheet appearance, you can override --doc-* variables like --doc-bg-color, --doc-text-color, and --doc-field-bg-color on :root or a wrapper element. For the full list of available variables and how they connect to the shared token system, see the CSS and Theming guide.