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 ✨
Top comments (3)
saved the repl with a small fix here
svelte.dev/repl/9f90707293554a27b9...
Thanks @jldec!
Looked the the
marked
package changed their imports. I've updated the article.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.