共有ロジックをモデリングするためのビジュアルエディター
コード、図、ドキュメント、テスト生成を1つのワークスペースにまとめるドラッグ&ドロップエディターでロジックを構築できます。
Statelyは、アプリや業務ロジックをstate machines、statecharts、actorsで設計できるビジュアルソフトウェアモデリングプラットフォーム。XStateを使った設計、シミュレーション、書き出し、実装に対応します。
Statelyは、アプリや業務ロジックをstate machines、statecharts、actorsへと変換するためのビジュアルソフトウェアモデリングプラットフォームです。ドラッグ&ドロップエディターとXStateを組み合わせることで、チームはロジックを視覚的に設計し、コードで実行できます。
このサイトでは、設計、開発、テスト、ドキュメント全体にわたるロジックの共通の信頼できる情報源としてStatelyを位置づけています。ユーザーはノーコードでフローを作成し、シミュレーションし、コードやReactアプリを生成し、図と実装の整合性を長期的に保てます。
コード、図、ドキュメント、テスト生成を1つのワークスペースにまとめるドラッグ&ドロップエディターでロジックを構築できます。
エディター内でstate machinesを直接シミュレーションできます。トリガーされたイベント、イベントログ、そしてマシンにエラーがない場合のイベントなし・遅延イベントの自動処理も含まれます。
state machinesをJavaScript、TypeScript、JSON、Mermaid、Markdown、Storiesとして書き出し、プロジェクトをCodeSandboxまたはStackBlitzに送信できます。
AIを使ってstate machines、React UI、コードを生成できます。料金プランごとに生成できる範囲が異なります。
バージョン管理で作業履歴を残し、上位プランでは非公開または未掲載プロジェクトを共有でき、GitHub Syncでコードベースとの整合性を保てます。
JavaScriptおよびTypeScriptアプリでXStateと併用でき、React、Vue、Svelteに対応し、エディターのワークフロー向けにVS Code拡張機能も用意されています。
ノーコードでフローを作成し、シミュレーションして状態変化を確認したうえで、実装前に反復できます。
ビジュアルエディターを使って、製品、デザイン、エンジニアリングの各チームで動作のあり方をそろえ、その後、図を信頼できる情報源として共有します。
図からstate machines、Reactアプリ、コードを生成して、開発作業への引き渡しを加速します。
図やマシン定義をJavaScript、TypeScript、Mermaid、Markdown、Storiesなどの形式に書き出し、ドキュメントや納品に活用します。
XState、GitHub Sync、React、Vue、Svelte、その他のJavaScriptアプリ向けフレームワーク対応を使って、モデルを既存のコードベースに接続します。
Stately Studioは、アプリや業務ロジックをstate machines、statecharts、actorsとして構築するためのビジュアルソフトウェアモデリングプラットフォームです。ドキュメントではXStateと組み合わせるビジュアルエディターとして説明されていますが、まず概念を学ぶ段階ではXStateなしでも使用できます。
ソースページには、ドラッグ&ドロップのビジュアルエディター、シミュレーションモード、コード書き出し、バージョン履歴、AI生成、GitHub Sync、Figma埋め込み、VS Code拡張機能が示されています。Reactアプリの生成やテスト生成にも対応しています。
料金ページには、公開プロジェクト向けの無料Communityプラン、非公開および未掲載プロジェクト向けのProfessionalプラン、チームで共有するプロジェクト向けのTeamプラン、カスタムオプション付きのEnterpriseプランが掲載されています。コンサルティングやワークショップ向けのサービス問い合わせ窓口もあります。
エクスポートのドキュメントによると、マシンコードをJSON、JavaScript、TypeScript、Mermaid、Markdown beta、Stories betaで書き出せるほか、CodeSandboxやStackBlitzにもエクスポートできます。一部の書き出し形式と機能は上位プラン限定です。
ドキュメントでは、Stately StudioはXStateと組み合わせると最も強力だが、Stately Studioなしでコードベース内でXStateを使うこともできると説明されています。ホームページではReact、Vue、Svelte、その他のフレームワーク向けの統合が利用可能とされており、ドキュメントにはVS Code拡張機能も記載されています。
トラフィックデータは参考情報としてご利用ください。
| 4月 | 71888 |
|---|---|
| 5月 | 70788 |
| 6月 | 78153 |