Getting Started

The following guide will give you the bare minimum to start using MDSX in your project. Once up and running, head over to the Blueprints section to learn more about the powerful features MDSX has to offer.

Install MDSX

MDSX is published as an npm package, so you can install it using your favorite package manager.

	npm install -D mdsx	

Create an MDSX Config

Create mdsx.config.js in the root of your project.

At a minimum, you must specify the extensions option to tell MDSX which file extensions to process. There are many other configuration options available, which you can learn more about in the MDSXConfig API reference.

	import { defineConfig } from 'mdsx';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
});	

Update Svelte Config

You'll need to update your Svelte config to include MDSX as a preprocessor. You can do so by updating your svelte.config.js file to include the following:

	import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsx } from 'mdsx';
import { mdsxConfig } from './mdsx.config.js';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [mdsx(mdsxConfig), vitePreprocess()],
	extensions: ['.svelte', '.md'],
	kit: {
		adapter: adapter(),
	},
};
 
export default config;	

Create a Markdown File

Create a markdown file anywhere in your project. For this example, we'll create src/lib/some-content.md.

	# Welcome!
 
This is my first MDSX markdown file. Isn't it great?
 
## Description
 
It gets better than this, we promise.	

Use the Markdown File

You can now import and use this file as you would any other Svelte component.

	<script>
	import SomeContent from '$lib/some-content.md';
</script>
 
<SomeContent />	

And just like that, you're up and running with MDSX! 🎉

Next Steps

This quick start guide doesn't even scratch the surface of what's possible with MDSX. It's highly recommended that you read through the Blueprints documentation to realize the full potential of MDSX.