Learning skills in fullstack development skills has opened my eyes with regards to the possibilities of what can be created with a bit of hard work, and I love Electron because it increases those possibilities even further by allowing me to create desktop apps using the skills I walready know.
This is just a rudimentary markdown editor, built more to lay the foundations of building a desktop app than to actually be anthing of use. In the future I'd love to build a snippets app where I can store important snippets by language or tag, much like Snip or Codespace, and a bookmarks app, very much like Raindrop.
The app itself is very simple, it uses Svelte's excellent data-binding to mirror the input to a new 'window' and the nodejs plugin Marked to convert Markdown to HTML. The code is so simple:
<script>
import marked from "marked";
let source = "# New document";
$: markdown = marked(source);
</script>
<div class="markdown-editor" style="-webkit-app-region: drag;">
<div class="markdown-editor__left-panel">
<textarea
bind:value="{source}"
class="markdown-editor__source"
></textarea>
</div>
<div class="markdown-editor__right-panel">
<div class="markdown-editor__output">{@html markdown}</div>
</div>
</div>