Build Markdown editor using Svelte in 10 minutes
Tags: svelte, tutorial, javascript, compiler
Published: 2019-11-16 10:09:08

---
title: Build Markdown editor using Svelte in 10 minutes
published: true
description: 
tags: 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](https://snipcart.com/blog/svelte-js-framework-tutorial). 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](https://github.com/karkranikhil/svelte-markdown)

**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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qlr95131beiy44m81u7m.png)
- 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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ky0n5ch0dyxrfkjgn9u9.png)

- Run your project using below command.
```
npm run dev
```
- Navigate to http://localhost:5000/ .You will see the below output

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sjoyyptegxqxr426q0yf.png)

**2. Install Marked**
In this Svelte project, we'll use the excellent [Marked](https://github.com/markedjs/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>
```
---
1. We have created a container with one header and two panel.
2. Left panel is a textarea, where we will write our source or markdown.
3. Using the *bind:value* directly, we instruct Svelte that the value of this form element should be bound to our source variable.
4. Right panel will show us the output of the compiled markdown.
5. 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.
```
npm run dev
```

Open a browser and go to localhost:5000. You will see the below output.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u3zhn862685xycwqlwj9.png)

**4. Deploying to the web With [now](https://zeit.co/now)**


Install `now` if you haven't already:

```bash
npm install -g now
```

Then, from within your project folder:

```bash
cd public
now
```
`now` will deploy your code and generate a URL.

Deployed Url - https://public-6von00e3p.now.sh

Github - https://github.com/karkranikhil/svelte-markdown

---

## References

https://svelte.dev/
https://snipcart.com/blog/svelte-js-framework-tutorial