DEV Community

Cover image for Prototyping stuff with Svelte's REPL
Joshua Nussbaum
Joshua Nussbaum

Posted on • Updated on

Prototyping stuff with Svelte's REPL

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 ✨

Top comments (3)

Collapse
 
jldec profile image
jldec

saved the repl with a small fix here

svelte.dev/repl/9f90707293554a27b9...

Collapse
 
joshnuss profile image
Joshua Nussbaum

Thanks @jldec!

Looked the the marked package changed their imports. I've updated the article.

Collapse
 
fahari profile image
Kevin

The Example has the error " 'default' is not exported by unpkg.com/marked@4.0.17/lib/marked..., imported by ./App.svelte".
It unfortunately doesn't run.