Build Markdown editor using Svelte in 10 minutes

#svelte #tutorial #javascript #compiler

Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.

Svelte compiler, compiles your components into JavaScript instead of relying on concepts like Virtual DOM to update your browser DOM. This boosts performance and brings true reactivity to your code.

After reading an article on Snipcart. I got inspired to try out Svelte markdown demo.

Let's build a markdown editor. My goal is to show how simple and quick it is to get started with Svelte

If you want to see the code directly you can checkout my Git repo

1. Setup

First create the svelte project with the below command.

npx degit sveltejs/template svelte-markdown-demo

After completion of above command.You will see the project folder has been created. As shown below

Then go inside the project directory and install dependencies

cd svelte-markdown-demo
npm install

After completion of above command.You will see the node_modules folder has been created to the project. As shown below

Run your project using below command.

npm run dev

Navigate to http://localhost:5000/ .You will see the below output

2. Install Marked
In this Svelte project, we'll use the excellent Marked library, a markdown parser and compiler.

Let's install marked package to our project using below command

npm install marked

3. Let's write the code

In your project, open App.svelte—we'll write our application in this - - component directly. To show how simple Svelte is, we'll write everything in this component.
Remove the code in the script tag.
Then, import marked. In the script tag add this line on top:

import marked from 'marked';

-We'll then create two variables, source containing the markdown text that will be compiled by marked and another containing the HTML compiled by the Marked library.

let source = `
# H1 heading

## H2 heading

### H3 heading

---

**bold text**

*italicized text*

---

1. First item
2. Second item
3. Third item

- First item
- Second item
- Third item

[Svelte](https://svelte.dev/)
`;
let markdown = marked(source);

Let's write the template. In the same file(App.svelte, add these lines after the script block.

<main class="container">
<header class="header">
    <h1 class="header-title">Svelte markdown editor</h1>
</header>

<div class="markdown-editor">
    <div class="left-panel">
        <textarea bind:value={source} class="source"></textarea>
    </div>

    <div class="right-panel">
        <div class="output">{@html markdown}</div>
    </div>
</div>
</main>

We have created a container with one header and two panel.
Left panel is a textarea, where we will write our source or markdown.
Using the bind:value directly, we instruct Svelte that the value of this form element should be bound to our source variable.
Right panel will show us the output of the compiled markdown.
here's a special tag in Svelte that you can use: {@html ...}. This tag will make sure that the HTML is rendered directly in the component.

Finally, we'll add some styles. In the same file, add a style block after the template.

    .container{
        background: #ff3e00d6;
        padding:10px 30px;
    }
    .header {
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .header-title {
        margin: 0;
        color:#fff;
    }
    .markdown-editor {
        width: 100%;
        display: flex;
        align-items:flex-start;
        justify-content: space-evenly;
    }
    .left-panel, .right-panel {
        width: 50%;
        border: solid 1px black;
        height: 85vh;
        background: #ffffff;
    }
    .right-panel {
        overflow: auto;
    }
    .source {
        border: none;
        width: 100%;
        height: 100%;
        background: #001628;
        color: #83ba52;
    }
    .source:focus {
        outline: none;
    }
    .output {
        width: 100%;
        padding: 0 2em;
    }

3. Final output
let run the our development server.