Sandpack | Markdown Enhance Plugin

Demo

Vue

<script setup>
import { ref } from "vue";

import Comp from "./Comp.vue";

const msg = ref("Hello World!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <Comp />
</template>

Open Sandbox

<script setup>
import { ref } from "vue";

const msg = ref("Hello Playground!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

Read-only

Open Sandbox

React demo

export default function App() {
  return <h1>Hello world</h1>;
}

Open Sandbox

Angular demo

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  helloWorld = "Hello world";
}

Open Sandbox