MDX Preview lets you preview MDX seamlessly. Write markdown / JSX, see it live refresh and get instant visual feedback.
Instant preview as you type without starting a dev server or building
To get started:
yarn install or
npm install if necessary so that you have the npm dependencies in your workspace, and navigate to your
mdx file; or just create an untitled file, change language mode (from command palette) to mdx and type some mdx code.
- Open command palette, and type "MDX: Open Preview"; or click the magnifying glass.
Preview will automatically update when you change the file you are previewing or the files that currently previewed file depends on.
MDX Extension is recommended for syntax highlighting of MDX files.
You can apply custom layout to the MDX file by
- Exporting a default layout value using
import Layout from '../components/Layout';
export default Layout
Specifying a path to a custom layout config file in
mdx-preview.preview.mdx.customLayoutFilePath extension setting. For example, the absolute path to the
../components/Layout file above.
When nothing is specified, by default it will apply VS Code Markdown styles. You can turn that off by
mdx-preview.preview.useVscodeMarkdownStyles extension settings or "MDX: Toggle VSCode Markdown Styles" command.
You can import other files with
import AnotherMDX from './AnotherMDX.mdx'
#root element, you can also preview that using MDX Preview. For example, you can preview the
index.js file from your react app:
import ReactDOM from 'react';
import App from './App';
Note that VS Code webview has some limitations:
- Service worker / Local storage are not available.
MemoryRouter if you are using React Router.
Code will only be evaluated inside VS Code extension webview's isolated iframe. The MDX files can only require dependencies within your active workspace folders. By default, only HTTPS content is allowed within the webview. Of course, you still need to make sure you trust the MDX file you preview, AND trust the files inside your workspace. Note that with the default Content Security Policy, you would not be able to preview a LiveEditor.
You can change your security settings through
mdx-preview.preview.security extension setting or "MDX: Change Security Settings" command.
This extension contributes the following settings:
mdx-preview.preview.previewOnChange: If set to true, previews on file change; If set to false, previews on file save
mdx-preview.preview.security: Security policy settings
mdx-preview.preview.useVscodeMarkdownStyles: Use VS Code Markdown Styles for layout.
mdx-preview.preview.useWhiteBackground: Use white background regardless of current theme settings.
mdx-preview.preview.mdx.customLayoutFilePath: Path of custom layout file to use
mdx-preview.build.useSucraseTranspiler: Use sucrase as transpiler (A faster alternative to babel) instead of Babel/TypeScript transpiler
How it works
MDX Preview transpiles your
.mdx file using
@mdx-js/mdx, sends the initial file to the webview, and recursively fetches local dependencies (from your workspace) and npm dependencies (from
node_modules directory) from your workspace using polestar, a commonjs-ish module loader for browsers. MDX Preview has provided built-in dependencies for MDX rendering like
Some components doesn't work?
In most cases runtime errors will surface in react-error-overlay. If it doesn't, you can open "Developer: Open Webview Developer Tools" (from command palette) to inspect the error. Note that VS Code webview has some inherent limitations that might cause errors.
Build issues? Try checking
mdx-preview.build.useSucraseTranspiler extension setting. It might solve it.
- [x] TypeScript support
- [ ] Scroll Sync
- [ ] remark/rehype plugins
- [ ] Integrations with gatsby / x0 /...
This extension is not possible without the help from James and the open source polestar library.
Saying thanks to these awesome open source projects as well: