Features Docs Pricing Mastery Sessions Blog Log in
    Features Docs Pricing Mastery Sessions Blog Log in
    • Welcome
    • Getting started
    • Concepts
      • Folders
    • Online Studio
      • Comments
      • Source Code Management
      • User's Preferences
    • CLI
    • VSCode Extension
    • Design Tokens
      • Icon prefixUsing Style-Dictionary & Figma
      • Icon prefixUsing Specify
      • Icon prefixUsing CSS Custom properties
      • Icon prefixUsing System-UI
    • Stories
    • Testing
    • Using the DS in your app
      • Standard procedure
      • Icon prefixCreate React App (CRA)
      • Icon prefixNuxt 3
      • Icon prefixNext.js 11 and earlier
      • Icon prefixNext.js 12 and later
      • Icon prefix11ty (with Nunjucks)
    • Design System Examples
    • How-tos
      • How to load an image
    • Technologies Demos
    • Technologies
      • Icon prefixJavaScript
      • Icon prefixTypeScript
      • Icon prefixJSX
      • Icon prefixComponent Story Format
      • Icon prefixCustom Elements Manifest
      • Icon prefixReact
      • Icon prefixPreact
      • Icon prefixVue 3
      • Icon prefixSvelte
      • Icon prefixStencil
      • Icon prefixRiot
      • Icon prefixµce
      • Icon prefixPrism
      • Icon prefixAssemblyScript
      • Icon prefixWebAssembly Text Format
      • Icon prefixCSS
      • Icon prefixSass
      • Icon prefixLess
      • Icon prefixmarkdown
      • Icon prefixmdjs
      • Icon prefixMD Vue
      • Icon prefixMDX
      • Icon prefixMDsveX
      • Icon prefixNunjucks
      • Icon prefixpug
      • Icon prefixVS Code Custom Data Format
      • Icon prefixStyle Dictionary
    • Supported config files
      • package.json
      • studio.config.json
      • tsconfig.json
      • tailwind.config.js
      • eslint
      • prettier
      • stories.preview
      • custom-elements-manifest.config.mjs
      • sd.config.{json,js}
    • FAQ

    MDsveX #

    Source file extensions: .svx

    MDsveX is an authorable format that lets you seamlessly insert Svelte components within Markdown documents.

    Quick example #

    index.svx

    <script>
      import Chart from './chart.svelte';
    </script>
    
    # Hello friends
    
    <Chart />
    

    References #

    • MDsveX
    MDX
    Nunjucks