TypeloomDocumentation
search⌘K

Navigation

Browse docs

infoHome

Get Started

  • note_addOverview
  • create_new_folderCreate Your First Project
  • tocNavigation and Views

Workspace

  • view_listOverview
  • folder_openBinder
  • articleEditor
  • grid_viewCorkboard
  • Research
  • find_replaceSearch and Replace

Templates and Tools

  • dashboard_customizeOverview
  • auto_storiesProject Templates
  • constructionTools Library

Import and Export

  • swap_horizOverview
  • upload_fileImport Files
  • downloadExport Your Work

Storage and Sync

  • syncOverview
  • saveStorage Options
  • cloudCloud Connections

Account and Settings

  • badgeOverview
  • settingsProject Settings
  • manage_accountsUser Settings
  • keyboardKeyboard Shortcuts

Reference

  • menu_bookOverview
  • short_textPage Estimation
  • descriptionSupported File Types
  • library_addDocumentation Authoring
helpTroubleshooting
track_changesChangelog
library_add

Documentation Authoring

This page explains how the Typeloom documentation site is organized for future updates.

dashboard_customize Stack

The documentation site is built with:

  • MkDocs
  • Material for MkDocs
  • mkdocs-static-i18n for multilingual support

construction Local commands 

python3 -m pip install -r requirements-docs.txt
npm run docs:serve
npm run docs:build

translate Language workflow

English is the source language.

  • Base page: workspace/editor.md
  • Norwegian translation: workspace/editor.no.md

If a translated file does not exist yet, the site falls back to the English page.

movie YouTube embeds

Typeloom documentation is ready for responsive YouTube embeds.

Use this pattern inside a Markdown page:

<div class="tl-video">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Short Typeloom walkthrough"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
  ></iframe>
</div>

description Screenshot placeholders

Until you have a final screenshot, use a placeholder block directly in the page where the image belongs:

<figure class="tl-figure">
  <div class="tl-image-placeholder">Suggested screenshot: export panel with scope and format options visible</div>
  <figcaption>
    Replace this placeholder with a screenshot of the export panel while a real document or folder is selected.
    <span class="tl-image-replace-note">Suggested file name: export-panel-options.png</span>
  </figcaption>
</figure>

This gives you three useful things:

  • the exact location where the final screenshot should be placed
  • a reminder of what the screenshot should show
  • a suggested file name so image assets stay organized

lightbulb Example blocks

Use these blocks when a feature is easier to understand through a scenario instead of a generic explanation:

<div class="tl-example">
  <p class="tl-example-label">Example</p>
  <h3>Export one folder for an external reviewer</h3>
  <p>Explain the realistic scenario in plain language.</p>
</div>

You can also use:

  • tl-note for best practices or warnings
  • tl-steps-block for step-by-step example workflows
  • tl-detail-list for short, structured detail pairs inside an example

checklist Content rules

  • Keep the language plain and direct.
  • Do not use emojis.
  • Prefer real workflows over abstract descriptions.
  • Update the page that matches the feature you change.
  • If behavior is not available yet, label it clearly instead of presenting it as current.
  • Add screenshot placeholders where a visual explanation would help, even if the final image is not ready yet.