Install
Choose Notes on the embed page for installation code with a title field and download button. mode: 'notes' hides the toolbar and enables block menus and counts. Explicit toolbar, handles and writingMode options take precedence.
<div id="my-note"></div>
<script src="https://typdit.com/embed/v1.js"></script>
<script>
const note = Typdit.create(document.getElementById('my-note'), {
mode: 'notes',
lang: 'en',
});
</script>Move between title and body
Press Enter or the down arrow in the title to move to the start of the body. Press the up arrow at the very start of the body to return to the end of the title. Enter used to confirm IME input keeps focus where it is.
Press Enter in an empty list item to finish the list and return to a paragraph. An indented item moves out one level first. Undo restores the list item.
Note options
mode: 'notes' | Note editor with title and downloads |
title / snapshot | Initial title and body |
lang | ko, en, ja, zh-cn, zh-tw. Default en |
downloads: false | Hide downloads. Shown by default in notes mode |
onNoteChange({ title, snapshot }) | Receives title and body when either changes. Use it to persist titles |
Save and download
onNoteChange supplies { title, snapshot } when either changes. Save this pair to preserve the title. getNote() reads it and setNote(note) restores it. The existing onChange(snapshot) remains body-only. export(format) returns a string; download(format) downloads a file. Formats: md, html, txt.
getNote() / setNote(note) | Read and load { title, snapshot } together |
export('md' | 'html' | 'txt') | Export title and body as a string, including current table input |
download('md' | 'html' | 'txt') | Download in the browser. Attachments remain links |
Browser storage example
This example saves one note in the current browser. Use a distinct key for each note on the same page. Implement server storage, authentication and authorization on your site. Clearing browser data removes this saved note.
If reading the saved note fails, the example stops autosave to protect the stored copy. Download any new writing in this state.
<div id="my-note"></div>
<p id="save-error" role="alert" hidden>Could not save. Download a copy before leaving.</p>
<script src="https://typdit.com/embed/v1.js"></script>
<script>
const key = 'my-site:note:meeting';
const warning = document.getElementById('save-error');
let saved = null;
let canSave = true;
try {
saved = JSON.parse(localStorage.getItem(key) || 'null');
if (saved && (typeof saved.title !== 'string' ||
saved.snapshot?.version !== 1 || typeof saved.snapshot.text !== 'string' ||
!Array.isArray(saved.snapshot.blocks) || !Array.isArray(saved.snapshot.marks))) {
throw new Error('Invalid saved note');
}
} catch {
saved = null;
canSave = false;
warning.hidden = false;
}
const note = Typdit.create(document.getElementById('my-note'), {
mode: 'notes',
lang: 'en',
title: saved?.title || '',
snapshot: saved?.snapshot,
onNoteChange(value) {
if (!canSave) return;
try {
localStorage.setItem(key, JSON.stringify(value));
warning.hidden = true;
} catch { warning.hidden = false; }
},
});
</script>License and storage
Use the note editor without a key. A valid Plus license removes the watermark on registered domains. Your site manages note storage and uploads.