{"id":13511947,"url":"https://github.com/jxnblk/ok-mdx","last_synced_at":"2025-04-05T02:11:11.704Z","repository":{"id":67375998,"uuid":"141325802","full_name":"jxnblk/ok-mdx","owner":"jxnblk","description":"Browser-based MDX editor","archived":false,"fork":false,"pushed_at":"2018-09-01T22:16:49.000Z","size":94950,"stargazers_count":766,"open_issues_count":3,"forks_count":23,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-29T01:13:42.099Z","etag":null,"topics":["cli","development","jsx","markdown","mdx","prototyping","react"],"latest_commit_sha":null,"homepage":"https://jxnblk.com/ok-mdx/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jxnblk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-07-17T18:04:31.000Z","updated_at":"2025-03-27T21:36:49.000Z","dependencies_parsed_at":"2023-05-18T02:45:22.380Z","dependency_job_id":null,"html_url":"https://github.com/jxnblk/ok-mdx","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fok-mdx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fok-mdx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fok-mdx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fok-mdx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxnblk","download_url":"https://codeload.github.com/jxnblk/ok-mdx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276189,"owners_count":20912288,"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":["cli","development","jsx","markdown","mdx","prototyping","react"],"created_at":"2024-08-01T03:01:20.947Z","updated_at":"2025-04-05T02:11:11.688Z","avatar_url":"https://github.com/jxnblk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Projects","cli"],"sub_categories":[],"readme":"\n# ok-mdx\n\n\u003cimg src='docs/ok-mdx.gif' /\u003e\n\nBrowser-based [MDX][] editor\n\n```sh\nnpm i -g ok-mdx\n```\n\n```sh\nmkdir docs\ntouch docs/hello.mdx\nmdx docs --open\n```\n\n- Quickly prototype with React components\n- Zero configuration\n- Mix markdown with JSX\n- Live edit and autosave\n\n## What is this for?\n\nMDX is great for documentation, building demos, or quickly prototyping with React components,\nwithout the need to set up a full-blown React application.\nSimilar to [Compositor x0][x0], ok-mdx is meant to be installed as a global command line utility\nthat you can use alongside your application setup or in isolated sandbox environments.\nok-mdx works well as a local alternative to tools like [CodeSandbox][] when working with React components.\n\n## Getting Started\n\nok-mdx needs a directory of `.mdx` or `.md` files to work.\n\nAfter installing ok-mdx, create a folder and an empty `.mdx` file with the following command:\n\n```sh\nmkdir docs \u0026\u0026 touch docs/hello.mdx\n```\n\nStart the ok-mdx app:\n\n```sh\nmdx docs --open\n```\n\nThis will open the application in your default browser, showing a list of the MDX files.\nClick on a filename to open the editor view.\nIn the right panel, add some text to see the preview on the left.\n\n### MDX Format\n\nMDX is a superset of [markdown][], which can also render [JSX][] instead of HTML.\n\n```mdx\n# Markdown Heading\n\n\u003cbutton className='blue'\u003eJSX button\u003c/button\u003e\n```\n\n### Importing Components\n\nIn order to import components, be sure they're installed locally.\nThis requires a `package.json` file in your current directory.\n\nTo create a `package.json` file, run `npm init -y`.\n\nTo install a component, use `npm install`. The following will install [grid-styled][] and [styled-components][] as a local dependency.\n\n```sh\nnpm i grid-styled styled-components\n```\n\nTo use components, import them at the top of your MDX file:\n\n```mdx\nimport { Flex, Box } from 'grid-styled'\n\n# Hello\n\n\u003cFlex alignItems='center'\u003e\n  \u003cBox p={3} width={1/2} bg='blue'\u003e\n    Flex\n  \u003c/Box\u003e\n  \u003cBox p={3} width={1/2}\u003e\n    Box\n  \u003c/Box\u003e\n\u003c/Flex\u003e\n```\n\n## Options\n\n```\n-o --open     Opens development server in default browser\n-p --port     Port for development server\n--vim         Enable editor Vim mode\n```\n\n### Exporting\n\nok-mdx is only meant to be used for development. To export your MDX files, consider one of the following tools:\n\n- [Compositor x0][x0]: great for creating documentation, blogs, static sites, or other small demos\n- [Next.js][next.js]: great for creating production-ready, server-side rendered React applications\n\n## Related\n\n- [mdx-go][]\n- [mdx-deck][]\n- [Compositor x0][x0]\n- [Compositor Iso][iso]\n- [MDX][]\n- [CodeSandbox][]\n\n[mdx-go]: https://github.com/jxnblk/mdx-go\n[mdx-deck]: https://github.com/jxnblk/mdx-deck\n[x0]: https://github.com/c8r/x0\n[iso]: https://compositor.io/iso\n[MDX]: https://github.com/mdx-js/mdx\n[CodeSandbox]: https://codesandbox.io\n[markdown]: https://daringfireball.net/projects/markdown/syntax\n[JSX]: https://facebook.github.io/jsx/\n[grid-styled]: https://github.com/jxnblk/grid-styled\n[styled-components]: https://github.com/styled-components/styled-components\n[next.js]: https://github.com/zeit/next.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Fok-mdx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxnblk%2Fok-mdx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Fok-mdx/lists"}