{"id":13788354,"url":"https://github.com/xyc/vscode-mdx-preview","last_synced_at":"2025-08-20T18:34:09.634Z","repository":{"id":34527521,"uuid":"179006881","full_name":"xyc/vscode-mdx-preview","owner":"xyc","description":"MDX Preview for Visual Studio Code","archived":false,"fork":false,"pushed_at":"2023-01-01T05:50:22.000Z","size":6434,"stargazers_count":176,"open_issues_count":87,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-25T08:13:05.301Z","etag":null,"topics":["markdown","mdx","preview","react","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=xyc.vscode-mdx-preview","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xyc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["xyc"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-04-02T05:43:04.000Z","updated_at":"2024-11-07T03:52:18.000Z","dependencies_parsed_at":"2023-01-15T07:45:43.739Z","dependency_job_id":null,"html_url":"https://github.com/xyc/vscode-mdx-preview","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyc%2Fvscode-mdx-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyc%2Fvscode-mdx-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyc%2Fvscode-mdx-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyc%2Fvscode-mdx-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xyc","download_url":"https://codeload.github.com/xyc/vscode-mdx-preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230445927,"owners_count":18227060,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","mdx","preview","react","vscode","vscode-extension"],"created_at":"2024-08-03T21:00:44.053Z","updated_at":"2024-12-19T14:08:18.258Z","avatar_url":"https://github.com/xyc.png","language":"TypeScript","funding_links":["https://github.com/sponsors/xyc","https://github.com/sponsors/xyc?frequency=one-time"],"categories":["Plugins","vscode-extension","TypeScript"],"sub_categories":[],"readme":"# [MDX Preview for Visual Studio Code](https://github.com/xyc/vscode-mdx-preview)\n\n**Please consider supporting the development of this project by [♡ GitHub Sponsorship](https://github.com/sponsors/xyc?frequency=one-time). You'll have profile badge displayed on the sponsors page!**\n\n**New in v0.2**: Type Script Preview and Hot Update https://vimeo.com/334605913\n\nMDX Preview lets you preview [MDX](https://mdxjs.com) seamlessly. Write markdown / JSX, see it live refresh and get instant visual feedback.\n\n![](./assets/example.gif)\n\n## Features\n\n### Instant preview as you type without starting a dev server or building\n\nTo get started:\n\n1. Run `yarn install` or `npm install` if necessary so that you have the npm dependencies in your workspace, and navigate to your `md` or `mdx` file; or just create an untitled file, change language mode (from command palette) to mdx and type some mdx code.\n2. Open command palette, and type \"MDX: Open Preview\"; or click the magnifying glass.\n\nPreview will automatically update when you change the file you are previewing or the files that currently previewed file depends on.\n\n[MDX Extension](https://github.com/silvenon/vscode-mdx) is recommended for syntax highlighting of MDX files.\n\n### Custom Layout\n\nYou can apply custom layout to the MDX file by\n\n1. Exporting a default layout value using `export default`\n\n```jsx\nimport Layout from '../components/Layout';\n\nexport default Layout\n\n## Hello\n```\n\n2. 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.\n\n3. 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.\n\n### MDX transclusion\nYou can import other files with `.md` or `.mdx` extension.\n\n```jsx\nimport AnotherMDX from './AnotherMDX.mdx'\n\n\u003cAnotherMDX\u003e\u003c/AnotherMDX\u003e\n```\n\n### JavaScript/TypeScript Preview\nIf you have a JavaScript or TypeScript file that renders to the `#root` element, you can also preview that using MDX Preview. For example, you can preview the `index.js` file from your react app:\n\n```js\n// index.js\nimport ReactDOM from 'react';\nimport App from './App';\nReactDOM.render(\n  \u003cApp /\u003e,\n  document.getElementById('root')\n);\n```\n\n#### Note that VS Code webview has some limitations:\n- Service worker / Local storage are not available. \n- Use `MemoryRouter` if you are using React Router.\n\n### Security\nCode 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. \nYou can change your security settings through `mdx-preview.preview.security` extension setting or \"MDX: Change Security Settings\" command.\n\n## Extension Settings\nThis extension contributes the following settings:\n\n* `mdx-preview.preview.previewOnChange`: If set to true, previews on file change; If set to false, previews on file save\n* `mdx-preview.preview.security`: Security policy settings\n* `mdx-preview.preview.useVscodeMarkdownStyles`: Use VS Code Markdown Styles for layout.\n* `mdx-preview.preview.useWhiteBackground`: Use white background regardless of current theme settings.\n* `mdx-preview.preview.mdx.customLayoutFilePath`: Path of custom layout file to use\n* `mdx-preview.build.useSucraseTranspiler`: Use [sucrase](https://sucrase.io) as transpiler (A faster alternative to babel) instead of Babel/TypeScript transpiler\n\n## FAQ\n\n#### How it works\nMDX 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](https://github.com/frontarm/polestar), a commonjs-ish module loader for browsers. MDX Preview has provided built-in dependencies for MDX rendering like `react`, `react-dom` and `@mdx-js/tag`.\n\n#### Some components doesn't work?\nIn 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. For example, components that use local storage but without a try/catch block.\n\nBuild issues? Try checking `mdx-preview.build.useSucraseTranspiler` extension setting. It might solve it.\n\n## Road map\n- [x] TypeScript support\n- [ ] Scroll Sync\n- [ ] remark/rehype plugins\n- [ ] Integrations with gatsby / x0 /...\n\n## Acknowledgements\nThis extension is not possible without the help from [James](https://twitter.com/james_k_nelson) and the open source [polestar](https://github.com/frontarm/polestar) library.\n\nSaying thanks to these awesome open source projects as well:\n- [Codesandbox preview for Atom](https://github.com/brumm/atom-codesandbox) for the idea of recursively resolving dependencies in the workspace and presenting in a preview.\n- [@mdx-js/mdx](https://github.com/mdx-js/mdx) for creating the authorable format\n- [gatsby-mdx](https://github.com/ChristopherBiscardi/gatsby-mdx) for properly doing MDX layout\n- [markdown-language-features](https://github.com/Microsoft/vscode/tree/master/extensions/markdown-language-features) for the markdown stylings and lessons on how to write a preview extension\n- [codesandbox](https://github.com/CompuIves/codesandbox-client) for inspirations on a rapid feedback loop\n- [mdx extension](https://github.com/silvenon/vscode-mdx) for mdx language contrib\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyc%2Fvscode-mdx-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxyc%2Fvscode-mdx-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyc%2Fvscode-mdx-preview/lists"}