Svelte's REPL is a very handy way to prototype new ideas. It's like CodePen, but specifically made for Svelte.

It's got some cool features. You can sign in with your GitHub account, which allows you to save your code. You can fork other folks' projects, download to run locally, and share projects with others.

Best of all, you don't need to install anything to use it 🙌

You can find the REPL here: https://svelte.dev/repl

A Markdown Editor

Here's how you can build a very simple markdown editor with Svelte's REPL (in just 6 lines of code).

Importing NPM packages

The REPL has integration with NPM, so you can import any package and it will install it for you on-demand.

In our case, we want a package that can convert markdown to html, so we'll use marked.

<script>
  // import markdown conversion library
  import marked from 'marked'
</script>

Binding inputs

Let's declare a variable let markdown to store the markdown text.

<script>
  ...

  // declare a variable to store markdown data
  let markdown = "# Example Title"
</script>

We can bind the markdown to a <textarea>:

<!-- updates the `markdown` var, whenever the textarea's value changes -->
<textarea bind:value={markdown}/>

Outputting HTML

Markdown is converted to HTML by simply calling marked(markdown).

<!-- output raw HTML for current value of `markdown` -->
<!-- updates whenever the value of <textarea> changes -->
{@html marked(markdown)}

Complete code:

<script>
  import marked from 'marked'

  let markdown = "# Example Title"
</script>

<textarea bind:value={markdown}/>

{@html marked(markdown)}

There you have it, a complete live-updating markdown editor in just 6 LOC!

Link to example:
https://svelte.dev/repl/98a473d8e5ec46bca9db12b22b591902?version=3.19.2

Happy coding ✌

If you want to learn more about Svelte, I'm working on a course ✨