ホームVueTencent/tmagic-editor
// archived 2026-04-07
Tencent

tmagic-editor

Frontend#Vue#TypeScript#Low-code#Editor
GitHub で見る →
4,891

// 概要

TMagic は Vue 3.0 と TypeScript をベースにしたビジュアル構築プラットフォームであり、開発者がモバイル向け H5 ページを迅速に生成できるよう設計されています。エディターのコアパッケージ、マルチフレームワークのランタイム環境、フォームレンダリング機能を提供することで、開発者が独自のビジュアル編集ツールを柔軟に構築できるよう支援します。開発者は組み込みの Playground サンプルプロジェクトを参照することで、ビジネス要件を満たすページ構築機能を迅速に統合および実装できます。

// 技術解説

TMagic は Vue 3.0 Composition API と TypeScript をベースに構築されたビジュアル構築プラットフォームであり、モジュール式アーキテクチャを通じてモバイル H5 ページの開発プロセスを簡素化するように設計されています。エディターコア、ランタイム環境、UI コンポーネントを独立した npm パッケージに分割することで、開発者に高い柔軟性と拡張性を提供します。複雑なページ開発における高い反復性と低い効率性という課題に対処し、DSL (Domain Specific Language) 駆動のレンダリングメカニズムを通じて、エディターの設定から最終的なページの出力までシームレスな統合を実現しています。

// 主要ハイライト

01
Vue 3.0 Composition API と TypeScript を使用して開発されており、モダンなコードと型安全性を確保しています。
02
マルチフレームワーク対応のランタイム環境を提供し、Vue 2、Vue 3、React バージョンをサポートすることで、異なる技術スタックのレンダリングニーズに対応しています。
03
Element UI に基づくフォームレンダリングエンジンを内蔵しており、JS Schema に基づいて設定フォームを迅速に生成可能です。
04
コア機能は npm パッケージとしてリリースされており、開発者はビジネスニーズに応じてエディターやランタイムの機能を柔軟に統合できます。
05
完全な Playground サンプルプロジェクトを提供しており、開発者が独自のビジュアルプラットフォームを迅速に理解し構築できるよう支援します。

// ユースケース

01
モバイル向け H5 ビジュアルエディターを迅速に構築する
02
エディターで作成された DSL ページをマルチフレームワークランタイム (Vue2/Vue3/React) を通じてレンダリングする
03
Element-UI ベースのフォームレンダリングコンポーネントを活用し、JS Schema 設定項目の動的生成を実現する

// クイックスタート

環境に Node.js 18+ と pnpm 9+ がインストールされていることを確認し、pnpm bootstrap を実行してプロジェクトの依存関係をインストールしてください。その後、pnpm playground コマンドを実行してサンプルプロジェクトを起動し、ブラウザで http://localhost:8098/tmagic-editor/playground/ にアクセスして TMagic エディターの体験を開始してください。