DEV Community

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

Posted on β€’ Edited on

16 4

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 ✨

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay