📝 Markdown Components Examples
Demonstrations of pan-markdown-editor, pan-markdown-renderer, and pan-files components
1. Markdown Renderer
The pan-markdown-renderer component renders markdown to styled HTML.
<pan-markdown-renderer content="# Hello World
This is **bold** and this is *italic*.
- Item 1
- Item 2
- Item 3">
</pan-markdown-renderer>
2. Markdown Editor with Live Preview
The pan-markdown-editor component provides a rich editing experience with formatting toolbar and optional live preview.
<pan-markdown-editor
value="# Start Writing..."
preview="true"
autosave="false">
</pan-markdown-editor>
3. File System Manager
The pan-files component manages files in the browser's Origin Private File System (OPFS).
Try creating, renaming, and deleting files.
<pan-files filter=".md"></pan-files>
4. Editor + File Manager (PAN Integration)
Components communicate via PAN events. Select a file to load it in the editor, and save your changes.
5. Programmatic Control
All components expose public APIs and can be controlled via JavaScript or PAN events.
// Get/Set editor content
const editor = document.querySelector('pan-markdown-editor');
editor.setValue('# New Content');
const content = editor.getValue();
// Render markdown programmatically
const renderer = document.querySelector('pan-markdown-renderer');
renderer.setContent('# Dynamic Content');
// File operations
const files = document.querySelector('pan-files');
await files.writeFile('/test.md', '# Hello');
const content = await files.readFile('/test.md');
await files.deleteFile('/test.md');
// PAN events
bus.publish('markdown.set-content', { content: '# Hello' });
bus.publish('file.save', { path: '/doc.md', content: '# Saved' });