demos.md

layout
default

Play with Yorkie!

CodeMirror

The CodeMirror example uses custom CRDT type, Text.

For more details: codemirror.html

<textarea id="text-editor">Type text here</textarea>

Markdown

Markdown example also uses Text.

<textarea id="markdown-editor">Type markdown here</textarea>

Quill

The Quill example uses custom CRDT type, RichText.

For more details: quill.html

Drawing

The drawing example uses Array.

For more details: drawing.html

Simple Kanban board

Using Vue.js

{% raw %}

❌

{{ list.title }}

❌ {{ card.title }}

Add another card

Add another list

{% endraw %}

<script src="/static/js/demo-util.js"></script> <script src="/static/js/demo-peer-awareness.js"></script> <script src="/static/js/demo-codemirror.js"></script> <script src="/static/js/demo-markdown.js"></script> <script src="/static/js/demo-quill.js"></script> <script src="/static/js/demo-drawing.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js" integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="/static/js/demo-kanban.js"></script> <script> const placeholder = document.getElementById('text-editor'); const markdownPlaceholder = document.getElementById('markdown-editor'); const drawingPanel = document.getElementById('drawing-panel'); const kanbanBoard = document.getElementById('kanban-board'); const quillEditor = document.getElementById('quill-editor'); const peerList = document.getElementById('peer-list'); async function main() { try { {% if jekyll.environment == "production" %} // Production build uses https://api.yorkie.dev const client = new yorkie.Client('https://api.yorkie.dev'); {% else %} // yorkie-js-sdk serves its envoy endpoint as localhost:8080 const client = new yorkie.Client('http://localhost:8080'); {% endif %} await client.activate(); const doc = new yorkie.Document(`examples$${getYYYYMMDD()}`); await client.attach(doc); await createPeerAwareness(client, doc, peerList); await createTextExample(client, doc, placeholder); await createMarkdownExample(client, doc, markdownPlaceholder); await createQuillExample(client, doc, quillEditor); await createDrawingExample(client, doc, drawingPanel); await createKanbanExample(client, doc, kanbanBoard); } catch (e) { console.error(e); } } main(); </script>