Skip to content

Latest commit

 

History

History

vue-playground

README.md

vue-playground

A code editor runner, real-time editing, real-time compilation, real-time preview.

English | 简体中文

version monaco-editor vue license coverage gzip stars

Introduction

vue-playground is a vue3 component based on monaco-editor.

It supports real-time editing, real-time compilation, and real-time preview. Similar to the small codesandbox.

Features

  • Real-time editing, real-time compilation (vue3, js, ts, jsx, tsx, css), real-time running, real-time preview.
  • Support for custom import mapping.
  • Support to create new files, delete files, support.
  • Editor supports ts type hinting (.ts files only).
  • Support switching layout, support full screen.
  • Support dark mode.
  • Support custom theme color.

Installation

for npm

npm i vue-playground monaco-editor

for yarn

yarn add vue-playground monaco-editor

for pnpm

pnpm add vue-playground monaco-editor

Usage

The usage is documented in the documentation.

Notice

This component depends on monaco-editor and @babel/standalone, So it will be bigger after packing.

Recommended for lowcode projects. Or documentation to write demo .

Acknowledgement

Contributing

Learn about contribution here.

This project exists thanks to all the people who contribute:

License

MIT License © 2022-PRESENT yangjinming