@studiometa/playground
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

@studiometa/playground

NPM Version Downloads Size Dependency Status

A packaged small code editor for shareable demo, deploy it in seconds.

Screenshots of the playground in light and dark mode

Usage

Install the package:

npm install @studiometa/playground

Create the following files:

src/templates/pages/index.twig

{% include '@playground/pages/index.twig' %}

meta.config.js

import { playgroundPreset, defineWebpackConfig } from '@studiometa/playground/preset';

export default defineWebpackConfig({
  presets: [playgroundPreset()],
});

tailwind.config.js

import { tailwindConfig } from '@studiometa/playground/tailwind';

export default tailwindConfig();

And then run npx meta dev and open http://localhost:3000.

You can configure the playground by passing a configuration object to the playgroundPreset function. Have a look at the demo for all available options.

When you are ready, run npx meta build and you can deploy the generated dist/ folder to any static hosting of your choice.

Package Sidebar

Install

npm i @studiometa/playground

Weekly Downloads

408

Version

0.1.3

License

MIT

Unpacked Size

189 kB

Total Files

168

Last publish

Collaborators

  • jeremiewerner