Svelte Markdown Component

Using markdown with Svelte allows you to create super simple websites that require almost no-coding. The svelte-markdown component makes this easy with one line of Svelte.


Use NPM to install svelte-markdown to your project.

npm i svelte-markdown


The svelte-markdown library is a component that can be used just like an HTML tag. First, you need to import it from the node_modules where you installed it.

  import SvelteMarkdown from 'svelte-markdown'


Once it's imported create you can either create a variable with your markdown document in it called source and pass it to the component like below:

<SvelteMarkdown {source} />

or you can name the variable anything you like and pass it like this

<SvelteMarkdown source={markdown} />

svelte-markdown is a great tool for making a blog that is easy to update and write posts. Markdown is a great alternative to HTML if you want the feel of a WYSIWYG editor like TipTap without the extra steps of setting it up. You can read more about svelte-markdown on its GitHub here



Be the first to comment!

Read More

DOM Structure
DOM Structure

What is HTML DOM?

The HTML Document Object Model (DOM) is an integral part of web development and is used to create dynamic web pages. It is a hierarchical tree-like structure that contains the content of the webpage, making it possible for developers to access and manipulate the content. Each element of the webpage is a node, with a unique ID and a set of attributes. The root node of the DOM ...

Image of a keychain with the word SEO on it
Image of a keychain with the word SEO on it

Basics of SEO in HTML

Search engine optimization (SEO) is the process of improving the visibility and ranking of a website in search engines like Google. It involves making changes to the website's ...

Making sticky elements in HTML and CSS.

Sticky elements are a useful feature in modern web design, as they allow certain elements on a webpage to remain visible even when the user scrolls. This can be useful for elements such as the n...

Express Plugins

Express plugins can be used to process POST body data, serve static files, or serve content with CORS enabled. Learn the basics of app.use.