Components
Loading preview...
A sleek, accessible code editor sheet powered by shadcn/ui, Ace Editor, and Radix UI supporting multiple languages with syntax highlighting and theme switching. Easily integrate customizable, interactive code editing into your web applications.
npx shadcn@latest add https://21st.dev/r/bankkroll/code-editor-sheet"use client";
import * as React from "react";
import { Code2, Edit } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { CodeEditorSheetComposed } from "@/components/ui/code-editor-sheet";
function DemoMain() {
return (
<div className="w-full max-w-7xl mx-auto px-4 py-12">
<div className="text-center my-12">
<h1 className="text-4xl font-extrabold text-foreground tracking-tight">
Code Editor Sheet
</h1>
<p className="text-lg text-muted-foreground mt-4 max-w-3xl mx-auto">
Powered by shadcn/ui for UI components, ace-builds for multi-language code editing, next-themes for theme switching, and Radix UI for accessible dialogs.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Multi-language Editor</CardTitle>
<CardDescription className="text-sm">Switch between all supported languages</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full border-primary">
<Code2 className="h-4 w-4" />
Multi-language Editor
</Button>
}
title="Multi-language Editor"
description="Switch between all supported languages"
defaultLanguage="html"
allowLanguageChange={true}
defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
onSave={(code, lang) => console.log(`Saved ${lang} code:`, code)}
onReset={() => console.log("Multi-language code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">CSS Editor</CardTitle>
<CardDescription className="text-sm">Style your web content</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Write CSS
</Button>
}
title="CSS Editor"
description="Style your web content"
defaultLanguage="css"
allowLanguageChange={false}
defaultValue={`/* Hello World in CSS */
.hello-world {
color: blue;
font-size: 16px;
}`}
onSave={(code) => console.log("Saved CSS code:", code)}
onReset={() => console.log("CSS code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">JavaScript Editor</CardTitle>
<CardDescription className="text-sm">Add interactivity to your web apps</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="default" className="gap-2 w-full">
<Edit className="h-4 w-4" />
Edit JavaScript
</Button>
}
title="JavaScript Editor"
description="Add interactivity to your web apps"
defaultLanguage="javascript"
allowLanguageChange={false}
defaultValue={`// Hello World in JavaScript
console.log("Hello, World!");`}
onSave={(code) => console.log("Saved JavaScript code:", code)}
onReset={() => console.log("JavaScript code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">TypeScript Editor</CardTitle>
<CardDescription className="text-sm">Write type-safe JavaScript</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="secondary" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
TypeScript Code
</Button>
}
title="TypeScript Editor"
description="Write type-safe JavaScript"
defaultLanguage="typescript"
allowLanguageChange={false}
defaultValue={`// Hello World in TypeScript
const message: string = "Hello, World!";
console.log(message);`}
onSave={(code) => console.log("Saved TypeScript code:", code)}
onReset={() => console.log("TypeScript code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">HTML Editor</CardTitle>
<CardDescription className="text-sm">Structure your web pages</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
HTML Content
</Button>
}
title="HTML Editor"
description="Structure your web pages"
defaultLanguage="html"
allowLanguageChange={false}
defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
onSave={(code) => console.log("Saved HTML code:", code)}
onReset={() => console.log("HTML code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">JSON Editor</CardTitle>
<CardDescription className="text-sm">Manage data configurations</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="ghost" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
JSON Config
</Button>
}
title="JSON Editor"
description="Manage data configurations"
defaultLanguage="json"
allowLanguageChange={false}
defaultValue={`{
"message": "Hello, World!"
}`}
onSave={(code) => console.log("Saved JSON code:", code)}
onReset={() => console.log("JSON code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Python Editor</CardTitle>
<CardDescription className="text-sm">Script with Python</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Python Script
</Button>
}
title="Python Editor"
description="Script with Python"
defaultLanguage="python"
allowLanguageChange={false}
defaultValue={`# Hello World in Python
print("Hello World!")`}
onSave={(code) => console.log("Saved Python code:", code)}
onReset={() => console.log("Python code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Java Editor</CardTitle>
<CardDescription className="text-sm">Build robust applications</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="default" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Java Code
</Button>
}
title="Java Editor"
description="Build robust applications"
defaultLanguage="java"
allowLanguageChange={false}
defaultValue={`// Hello World in Java
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}`}
onSave={(code) => console.log("Saved Java code:", code)}
onReset={() => console.log("Java code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">C/C++ Editor</CardTitle>
<CardDescription className="text-sm">Write high-performance code</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="secondary" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
C/C++ Code
</Button>
}
title="C/C++ Editor"
description="Write high-performance code"
defaultLanguage="c_cpp"
allowLanguageChange={false}
defaultValue={`// Hello World in C/C++
#include <iostream>
using namespace std;
int main() {
cout << "Hello, World!" << endl;
return 0;
}`}
onSave={(code) => console.log("Saved C/C++ code:", code)}
onReset={() => console.log("C/C++ code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Ruby Editor</CardTitle>
<CardDescription className="text-sm">Create elegant scripts</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Ruby Script
</Button>
}
title="Ruby Editor"
description="Create elegant scripts"
defaultLanguage="ruby"
allowLanguageChange={false}
defaultValue={`# Hello World in Ruby
puts "Hello, World!"`}
onSave={(code) => console.log("Saved Ruby code:", code)}
onReset={() => console.log("Ruby code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">PHP Editor</CardTitle>
<CardDescription className="text-sm">Develop dynamic web pages</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="ghost" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
PHP Code
</Button>
}
title="PHP Editor"
description="Develop dynamic web pages"
defaultLanguage="php"
allowLanguageChange={false}
defaultValue={`<?php
// Hello World in PHP
echo "Hello, World!";
?>`}
onSave={(code) => console.log("Saved PHP code:", code)}
onReset={() => console.log("PHP code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">SQL Editor</CardTitle>
<CardDescription className="text-sm">Query databases</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
SQL Query
</Button>
}
title="SQL Editor"
description="Query databases"
defaultLanguage="sql"
allowLanguageChange={false}
defaultValue={`-- Hello World in SQL
SELECT 'Hello, World!' AS message;`}
onSave={(code) => console.log("Saved SQL code:", code)}
onReset={() => console.log("SQL code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Markdown Editor</CardTitle>
<CardDescription className="text-sm">Write formatted documentation</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="default" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Markdown Text
</Button>
}
title="Markdown Editor"
description="Write formatted documentation"
defaultLanguage="markdown"
allowLanguageChange={false}
defaultValue={`# Hello, World!
Welcome to Markdown.`}
onSave={(code) => console.log("Saved Markdown code:", code)}
onReset={() => console.log("Markdown code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Go Editor</CardTitle>
<CardDescription className="text-sm">Build scalable applications</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="secondary" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Go Code
</Button>
}
title="Go Editor"
description="Build scalable applications"
defaultLanguage="golang"
allowLanguageChange={false}
defaultValue={`// Hello World in Go
package main
import "fmt"
func main() {
fmt.Println("Hello, World!")
}`}
onSave={(code) => console.log("Saved Go code:", code)}
onReset={() => console.log("Go code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Rust Editor</CardTitle>
<CardDescription className="text-sm">Write safe, fast code</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Rust Code
</Button>
}
title="Rust Editor"
description="Write safe, fast code"
defaultLanguage="rust"
allowLanguageChange={false}
defaultValue={`// Hello World in Rust
fn main() {
println!("Hello, World!");
}`}
onSave={(code) => console.log("Saved Rust code:", code)}
onReset={() => console.log("Rust code reset")}
/>
</CardContent>
</Card>
<Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Lua Editor</CardTitle>
<CardDescription className="text-sm">Script lightweight applications</CardDescription>
</CardHeader>
<CardContent className="flex-1 flex items-center justify-center p-4">
<CodeEditorSheetComposed
trigger={
<Button variant="ghost" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Lua Script
</Button>
}
title="Lua Editor"
description="Script lightweight applications"
defaultLanguage="lua"
allowLanguageChange={false}
defaultValue={`-- Hello World in Lua
print("Hello, World!")`}
onSave={(code) => console.log("Saved Lua code:", code)}
onReset={() => console.log("Lua code reset")}
/>
</CardContent>
</Card>
</div>
</div>
);
}
function DemoMultiLanguage() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full border-primary">
<Code2 className="h-4 w-4" />
Multi-language Editor
</Button>
}
title="Multi-language Editor"
description="Switch between all supported languages"
defaultLanguage="html"
allowLanguageChange={true}
defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
onSave={(code, lang) => console.log(`Saved ${lang} code:`, code)}
onReset={() => console.log("Multi-language code reset")}
/>
</div>
);
}
function DemoCSS() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2">
<Code2 className="h-4 w-4" />
Write CSS
</Button>
}
title="CSS Editor"
description="Style your web content"
defaultLanguage="css"
allowLanguageChange={false}
defaultValue={`/* Hello World in CSS */
.hello-world {
color: blue;
font-size: 16px;
}`}
onSave={(code) => console.log("Saved CSS code:", code)}
onReset={() => console.log("CSS code reset")}
/>
</div>
);
}
function DemoJavaScript() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="default" className="gap-2 w-full">
<Edit className="h-4 w-4" />
Edit JavaScript
</Button>
}
title="JavaScript Editor"
description="Add interactivity to your web apps"
defaultLanguage="javascript"
allowLanguageChange={false}
defaultValue={`// Hello World in JavaScript
console.log("Hello, World!");`}
onSave={(code) => console.log("Saved JavaScript code:", code)}
onReset={() => console.log("JavaScript code reset")}
/>
</div>
);
}
function DemoTypeScript() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="secondary" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
TypeScript Code
</Button>
}
title="TypeScript Editor"
description="Write type-safe JavaScript"
defaultLanguage="typescript"
allowLanguageChange={false}
defaultValue={`// Hello World in TypeScript
const message: string = "Hello, World!";
console.log(message);`}
onSave={(code) => console.log("Saved TypeScript code:", code)}
onReset={() => console.log("TypeScript code reset")}
/>
</div>
);
}
function DemoHTML() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
HTML Content
</Button>
}
title="HTML Editor"
description="Structure your web pages"
defaultLanguage="html"
allowLanguageChange={false}
defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
onSave={(code) => console.log("Saved HTML code:", code)}
onReset={() => console.log("HTML code reset")}
/>
</div>
);
}
function DemoJSON() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="ghost" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
JSON Config
</Button>
}
title="JSON Editor"
description="Manage data configurations"
defaultLanguage="json"
allowLanguageChange={false}
defaultValue={`{
"message": "Hello, World!"
}`}
onSave={(code) => console.log("Saved JSON code:", code)}
onReset={() => console.log("JSON code reset")}
/>
</div>
);
}
function DemoPython() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Python Script
</Button>
}
title="Python Editor"
description="Script with Python"
defaultLanguage="python"
allowLanguageChange={false}
defaultValue={`# Hello World in Python
print("Hello World!")`}
onSave={(code) => console.log("Saved Python code:", code)}
onReset={() => console.log("Python code reset")}
/>
</div>
);
}
function DemoJava() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="default" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Java Code
</Button>
}
title="Java Editor"
description="Build robust applications"
defaultLanguage="java"
allowLanguageChange={false}
defaultValue={`// Hello World in Java
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}`}
onSave={(code) => console.log("Saved Java code:", code)}
onReset={() => console.log("Java code reset")}
/>
</div>
);
}
function DemoCPP() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="secondary" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
C/C++ Code
</Button>
}
title="C/C++ Editor"
description="Write high-performance code"
defaultLanguage="c_cpp"
allowLanguageChange={false}
defaultValue={`// Hello World in C/C++
#include <iostream>
using namespace std;
int main() {
cout << "Hello, World!" << endl;
return 0;
}`}
onSave={(code) => console.log("Saved C/C++ code:", code)}
onReset={() => console.log("C/C++ code reset")}
/>
</div>
);
}
function DemoRuby() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Ruby Script
</Button>
}
title="Ruby Editor"
description="Create elegant scripts"
defaultLanguage="ruby"
allowLanguageChange={false}
defaultValue={`# Hello World in Ruby
puts "Hello, World!"`}
onSave={(code) => console.log("Saved Ruby code:", code)}
onReset={() => console.log("Ruby code reset")}
/>
</div>
);
}
function DemoPHP() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="ghost" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
PHP Code
</Button>
}
title="PHP Editor"
description="Develop dynamic web pages"
defaultLanguage="php"
allowLanguageChange={false}
defaultValue={`<?php
// Hello World in PHP
echo "Hello, World!";
?>`}
onSave={(code) => console.log("Saved PHP code:", code)}
onReset={() => console.log("PHP code reset")}
/>
</div>
);
}
function DemoSQL() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
SQL Query
</Button>
}
title="SQL Editor"
description="Query databases"
defaultLanguage="sql"
allowLanguageChange={false}
defaultValue={`-- Hello World in SQL
SELECT 'Hello, World!' AS message;`}
onSave={(code) => console.log("Saved SQL code:", code)}
onReset={() => console.log("SQL code reset")}
/>
</div>
);
}
function DemoMarkdown() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="default" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Markdown Text
</Button>
}
title="Markdown Editor"
description="Write formatted documentation"
defaultLanguage="markdown"
allowLanguageChange={false}
defaultValue={`# Hello, World!
Welcome to Markdown.`}
onSave={(code) => console.log("Saved Markdown code:", code)}
onReset={() => console.log("Markdown code reset")}
/>
</div>
);
}
function DemoGo() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="secondary" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Go Code
</Button>
}
title="Go Editor"
description="Build scalable applications"
defaultLanguage="golang"
allowLanguageChange={false}
defaultValue={`// Hello World in Go
package main
import "fmt"
func main() {
fmt.Println("Hello, World!")
}`}
onSave={(code) => console.log("Saved Go code:", code)}
onReset={() => console.log("Go code reset")}
/>
</div>
);
}
function DemoRust() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="outline" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Rust Code
</Button>
}
title="Rust Editor"
description="Write safe, fast code"
defaultLanguage="rust"
allowLanguageChange={false}
defaultValue={`// Hello World in Rust
fn main() {
println!("Hello, World!");
}`}
onSave={(code) => console.log("Saved Rust code:", code)}
onReset={() => console.log("Rust code reset")}
/>
</div>
);
}
function DemoLua() {
return (
<div className="flex justify-center items-center m-auto">
<CodeEditorSheetComposed
trigger={
<Button variant="ghost" className="gap-2 w-full">
<Code2 className="h-4 w-4" />
Lua Script
</Button>
}
title="Lua Editor"
description="Script lightweight applications"
defaultLanguage="lua"
allowLanguageChange={false}
defaultValue={`-- Hello World in Lua
print("Hello, World!")`}
onSave={(code) => console.log("Saved Lua code:", code)}
onReset={() => console.log("Lua code reset")}
/>
</div>
);
}
export {
DemoMultiLanguage,
DemoCSS,
DemoJavaScript,
DemoTypeScript,
DemoHTML,
DemoJSON,
DemoPython,
DemoJava,
DemoCPP,
DemoRuby,
DemoPHP,
DemoSQL,
DemoMarkdown,
DemoGo,
DemoRust,
DemoLua,
};
export default DemoMain;