DEV Community

loading...

Build Markdown editor using Svelte in 10 minutes

karkranikhil profile image Nikhil karkra ・Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode
  • After completion of above command.You will see the project folder has been created. As shown below

Alt Text

  • Then go inside the project directory and install dependencies
cd svelte-markdown-demo
npm install
Enter fullscreen mode Exit fullscreen mode
  • After completion of above command.You will see the node_modules folder has been created to the project. As shown below

Alt Text

  • Run your project using below command.
npm run dev
Enter fullscreen mode Exit fullscreen mode

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

-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);
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

  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;
    }

Enter fullscreen mode Exit fullscreen mode

3. Final output
let run the our development server.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open a browser and go to localhost:5000. You will see the below output.
Alt Text

4. Deploying to the web With now

Install now if you haven't already:

npm install -g now
Enter fullscreen mode Exit fullscreen mode

Then, from within your project folder:

cd public
now
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

pic
Editor guide
Collapse
ronvoluted profile image
Ron Au

Very quick and straightforward tut! One easy change to make:

let markdown = marked(source);
Enter fullscreen mode Exit fullscreen mode

should be changed to a reactive declaration:

$: markdown = marked(source);
Enter fullscreen mode Exit fullscreen mode

This way, the changes you make on the left get turned into markup on the right dynamically :)

Collapse
andrewbrown profile image
Andrew Brown πŸ‡¨πŸ‡¦

This was convenient, I was just building a form in svelte and needed markdown. 😊