DEV Community

loading...
Cover image for Prototyping stuff with Svelte's REPL

Prototyping stuff with Svelte's REPL

Joshua Nussbaum
Homosapien working with machines.
Updated on ・2 min read

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

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

We can bind the markdown to a <textarea>:

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

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

Complete code:

<script>
  import marked from 'marked'

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

<textarea bind:value={markdown}/>

{@html marked(markdown)}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)