Framework

Codespark uses a framework plugin system to support various language frameworks. Once configured, Codespark can compile and preview code written in that framework directly in the editor.

Installation

npm install @codespark/framework

import { html } from '@codespark/framework/html';
import { markdown } from '@codespark/framework/markdown';
import { react } from '@codespark/framework/react';

@codespark/framework/* also provides the Framework class, which allows you to create your own framework instance with custom configuration options:

import {  } from '@codespark/framework/html';

const  = new ()

Codespark already integrates @codespark/framework/react internally, so you don't need to install it again.

Usage

Codespark

You can specify the framework directly through the framework prop in the Codespark component.

< ={markdown} />

Provider

When using custom composable components, you can pass framework to CodesparkProvider.

< ={markdown} />

Workspace

You can also specify the framework when creating a Workspace instance. All Codespark components using this Workspace will use the specified framework.

new ({ : markdown, ... })

Global

Codespark provides a way to register frameworks globally. Use registerFramework in your project's entry file:

App.tsx

import {  } from '@codespark/framework';
import {  } from '@codespark/framework/markdown';

();

You can also register a framework with a custom name:

registerFramework(markdown, 'md');

Once registered globally, you can reference the framework by its name:

<Codespark framework="markdown" />
<CodesparkProvider framework="md" />

Frameworks

Framework	Import Path	Name	Description
React	`@codespark/framework/react`	react	React/JSX components with TypeScript support
HTML	`@codespark/framework/html`	html	HTML with CSS and JavaScript
Markdown	`@codespark/framework/markdown`	markdown	Markdown rendering

React

import { react } from '@codespark/framework/react';

React framework provides full support for React components rendering with the following features:

Auto dependency analysis
Multi-file support
TypeScript/TSX syntax support
Import .css, .json, and .md files
Automatic JSX runtime (no need to import React)
Extension auto-resolution (e.g., import './Button' resolves to ./Button.tsx)
External npm package support via ESM CDN

Markdown

import { markdown } from '@codespark/framework/markdown';

Markdown framework provides a simple markdown rendering solution:

Standard markdown syntax support
HTML rendering in preview
No external dependencies required

HTML

import { Framework, html } from '@codespark/framework/html';

// or use lite mode
const htmlLite = new Framework({
  liteMode: { enabled: true }
});

HTML framework provides full support for HTML/CSS/JavaScript development with the following features:

Multi-file support (HTML, CSS, JavaScript)
Lite mode for simplified HTML snippets (without <!DOCTYPE>, <html>, <head>, <body> tags)
CSS imports via <link> tags and @import statements
JavaScript modules via <script type="module">
External resource loading from CDN

Create Framework

Want to learn how to create a new Framework? Check out the Framework documentation.

If you want to add support for other frameworks, pull requests are welcome!

On this page