DokiDocs is a lightweight documentation framework that converts simple markup tags into styled HTML components. This page serves as both documentation and a live demo of all available features.
[heading: "Basic Text Elements"] [subheading: "Headings"]Use title, heading, and subheading tags to structure your content:
[title: "This is a Title"] [heading: "This is a Heading"] [subheading: "This is a Subheading"] [subheading: "Paragraphs and Text Formatting"]You can use regular HTML paragraphs or DokiDocs inline elements within your content. For example, you can include [code: "inline code"] snippets and [link: "clickable links" https://example.com] directly in your text.
[heading: "Code Examples"] [subheading: "Inline Code"]Use the code tag for short code snippets: [code: "const variable = 'value'" javascript]
[subheading: "Code Blocks"]For larger code examples, use codeblock with optional language specification:
[codeblock javascript] function calculateSum(a, b) { // This is a comment const result = a + b; console.log("The sum is: " + result); return result; } [/codeblock] [heading: "Lists"] [subheading: "Unordered Lists"]Create bulleted lists using various markers:
[list] - Dash bullet item - Another item with dash - Third list element [/list] [list] • Circular bullet item • Second circular item • Final circular item [/list] [list] * Hollow bullet style * Another hollow item * Last hollow item [/list] [subheading: "Ordered Lists"]Create numbered lists with different formats:
[list] 1. First item with dot 2. Second item with dot 3. Third item with dot [/list] [list] 1) Parenthesis format 2) Second item 3) Third item [/list] [heading: "Tables"] [subheading: "Basic Table"]Create structured data tables with the table tag:
[table header] [ Framework | Language | Popularity ] [ React | JavaScript | High ] [ Vue | JavaScript | Medium ] [ Angular | TypeScript | High ] [/table] [heading: "Media Elements"] [subheading: "Images"]Embed images with optional alt text and sizing:
[image: "https://picsum.photos/600/300" alt="Demo image from picsum"] [subheading: "Links"]Create internal and external links:
External link 1: [link: "Visit Example.com" https://example.com]
External link 2: [link: "Visit Example.com (in new window)" https://example.com blank]
Internal link: [link: "Back to Top" #top]
[heading: "Alert Boxes"] [subheading: "Information Notes"] [note: "This is a note box for important information that users should pay attention to but doesn't indicate any problems."] [subheading: "Warnings"] [warning: "This is a warning box that indicates potential issues or important considerations that users should be aware of before proceeding."] [subheading: "Danger Alerts"] [danger: "This is a danger box that indicates critical information, potential data loss, or irreversible actions. Users should proceed with extreme caution."] [heading: "Special Elements"] [subheading: "Citations"] [citation: "The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it." - Mark Weiser] [subheading: "Credits"] [credit: "Documentation generated using DokiDocs v1.0. Syntax highlighting powered by Google's prettify.js."] [subheading: "Frames"] [frame] This is a framed content area useful for highlighting specific information or creating separated content sections within your documentation. [/frame] [subheading: "Tabs"] [tab] Indented content useful for code examples, nested information, or creating visual hierarchy in your documentation structure. [/tab] [footer: "© Retora 2026"]