Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jucian0/playground
Tools to document React components
https://github.com/jucian0/playground
documentation mdx nextra playground reactjs
Last synced: about 2 months ago
JSON representation
Tools to document React components
- Host: GitHub
- URL: https://github.com/jucian0/playground
- Owner: jucian0
- License: mit
- Created: 2023-02-16T02:44:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-18T11:26:45.000Z (almost 2 years ago)
- Last Synced: 2024-10-20T15:46:06.708Z (3 months ago)
- Topics: documentation, mdx, nextra, playground, reactjs
- Language: TypeScript
- Homepage: https://reactjs-playground.vercel.app
- Size: 829 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
README
# Playground
`Playground` is a remark plugin and React component that allows you to create rich and interactive code examples for your documentation or web application.
## Motivation
`Playground` was created to make it easier for developers to create and share interactive code examples in their documentation or web application. Traditional code snippets can be difficult to read and understand, especially for beginners, and often lack the context needed to fully comprehend the code.
`Playground` solves this problem by providing an interactive environment for code examples that allows users to edit, run, and explore the code in real-time. Users can experiment with different inputs and outputs, see the results of their changes, and even copy the code to use in their own projects.
`Playground` also provides error handling and device-specific formatting options, making it a versatile and reliable tool for developers of all skill levels.
By using `Playground`, developers can create more engaging and interactive documentation and web applications, which can improve the learning experience for their users and ultimately lead to better adoption and retention of their products and services.
## Features
The `Playground` component provides the following features:
- Rule: Separates the example code from the rendered output.
- Show code: Allows the user to toggle the visibility of the example code.
- Copy code: Allows the user to copy the example code to their clipboard.
- Mobile, tablet, and desktop options: Provides options for displaying the example code and output in different formats depending on the device size.
- Error handling: Provides error handling for the example code and displays any errors that occur during code execution.
## Installation
To use `Playground`, you first need to install it as a dependency in your project:
```bash
npm install remark-playground
```
## Usage
Import css style
`import "remark-playground/styles.css";`
### Next.js
To use `Playground` with Next.js, you'll need to add a `next.config.mjs` file to the root of your project with the following content:
```js
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
options: {
remarkPlugins: [require("remark-playground/plugin")],
},
});
module.exports = withMDX();
```
This will configure Next.js to use Playground with MDX files in your project.
### Remix
To use `Playground` with Remix, you'll need to add a `mix.config.js` file to the root of your project with the following content:
```js
const mixMDX = require("@remix-run/mdx");
const remarkPlugins = [require("remark-playground/plugin")];
module.exports = mixMDX.default({
remarkPlugins,
});
```
This will configure Remix to use `Playground` with MDX files in your project.
### Astro
To use Playground with Astro, you'll need to add a `astro.config.mjs` file to the root of your project with the following content:
```js
import { createPlugin } from "astro";
import remark from "remark";
import remarkPrism from "@mapbox/remark-prism";
import playground from "remark-playground/plugin";
export default {
plugins: [
createPlugin({
name: "remark",
plugins: [playground, [remarkPrism, { ignoreMissing: true }], remark()],
}),
],
};
```
This will configure Astro to use `Playground` with MDX files in your project.
### Gatsby
To use `Playground` with Gatsby, you'll need to add a `gatsby-config.js` file to the root of your project with the following content:
```js
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-mdx",
options: {
gatsbyRemarkPlugins: [
{
resolve: "gatsby-remark-vscode",
options: {
theme: "Dark+ (default dark)",
extensions: ["theme-darcula"],
inlineCode: {
marker: ">",
},
},
},
],
remarkPlugins: [
require("remark-slug"),
require("remark-playground/plugin"),
],
},
},
],
};
```
This will configure Gatsby to use `Playground` with MDX files in your project.
### Using in MDX files
```mdx
import Playground from 'remark-playground';
import Button '...'
# Button
The `Button` component is a simple button that can be used in your application.
Click me
```
## Compatibility
`Playground` is designed to work with MDX files and can be used in many React frameworks, including Next, Remix, Astro, and Gatsby. However, please note that `Playground` only works with ESM modules, and you may need to use the .mjs file extension in some configurations.
License
`Playground` is released under the MIT License. See LICENSE for more information.