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
`section`	`doc-section`	Major section label
`subsection`	`doc-subsection`	Nested label beside inputs
`header`	`doc-header`	Often a name and date row
`instructions`	(preserved)	Guidance omitted from PDF
`spacer` / `indent`	`doc-spacer` / `doc-indent`	Vertical rhythm and indentation
`center`	`doc-center`	Centered call-to-action text

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

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 to print the raw URL as link text.

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

Team members

Notes (rich text)

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.

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">

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" name="notes"><p>…</p></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.