Textria For your website
Give visitors a place to take notes on your page. Choose a language and dimensions, try the editor, and copy the HTML code.
This is a working editor. Scroll horizontally if it is wider than the preview area.
Paste this code into your page HTML or an HTML block in your website builder.
Text is temporarily stored in your browser's sessionStorage and restored when the iframe reloads. To keep working later, move it to your personal notebook. If storage is unavailable, the draft stays in memory only until the page reloads.
The “Open personal notebook” link in the status bar opens Textria in a new tab and transfers the formatted text to a new note. An empty editor opens the notebook without creating a note. If the browser blocks the new tab, a message appears in the status bar.
You can place multiple iframes on a page, each with its own draft. If your site removes and recreates an iframe, set a stable instance parameter in the settings above. Use a different identifier for each editor.
Enable the API above and enter the origin of the page hosting the editor. The src will include api=1 and parentOrigin. Without these parameters, messaging is disabled. The editor accepts requests only from its direct parent page at the specified origin.
| Message | Purpose |
|---|---|
textria:embed:ready | The editor has loaded its draft and is ready for requests. No content is sent. |
textria:embed:ping | Check readiness: the editor replies with ready. Useful when a handler is attached after the iframe has loaded. |
textria:embed:get | Read the current content. The content response includes text and html. |
textria:embed:set | Replace content: send content and format: text or html. An empty string clears the editor. The content response contains the processed result. |
textria:embed:error | Request error: unsupported-version, invalid-format, invalid-content, content-too-long or editor-error. |
Every request requires version: 1 and a unique requestId (up to 120 Latin letters, digits and _ . : -). Responses repeat the requestId. The write limit is 1,000,000 characters. text preserves spaces and line breaks without interpreting Markdown; html keeps supported formatting while removing images, scripts and unsafe links. Replacements participate in autosave and can be undone in the editor. A response confirms that content was applied, not that storage has finished saving it. There are no automatic change events: request content with get when your site needs it.
Place this JavaScript after the iframe. Enabling the API adds an id to the iframe code; this example follows the identifier above. Check event.source and event.origin, and use the editor's exact origin in postMessage.
const iframe = document.getElementById("textria-editor");
const editorOrigin = new URL(iframe.src).origin;
let nextRequestId = 0;
function send(type, payload = {}) {
const requestId = "embed-" + ++nextRequestId;
iframe.contentWindow.postMessage({
...payload, type, version: 1, requestId,
}, editorOrigin);
return requestId;
}
window.addEventListener("message", (event) => {
if (event.source !== iframe.contentWindow || event.origin !== editorOrigin) return;
const data = event.data;
if (!data || data.version !== 1) return;
if (data.type === "textria:embed:ready") send("textria:embed:get");
if (data.type === "textria:embed:content") console.log(data.requestId, data.text, data.html);
if (data.type === "textria:embed:error") console.error(data.requestId, data.code);
});
send("textria:embed:ping");
function setText(content) {
return send("textria:embed:set", { format: "text", content });
}
// setText("Hello, Textria!");The generated code includes the required permissions: allow-scripts and allow-same-origin let the editor and local draft work; allow-popups and allow-popups-to-escape-sandbox let the full personal notebook open in a new tab.
The iframe supports text formatting, links, lists and tables. Images are disabled, including pasting and drag and drop. Enable the postMessage API to read and replace content from your website's script. The editor does not submit forms automatically.
For voice input, add allow="microphone" to the iframe. The button appears when the browser supports it and microphone access is allowed. Your site's Permissions Policy must also allow microphone access for Textria.