project
HTML Anything - nexu-ioチームによるオープンソースのHTMLエディタ。
HTML Anythingは、nexu-ioチームが開発したエージェント時代向けのオープンソースHTMLエディタです。雑誌、プレゼンテーション、ポスター、小紅書カードなど9種類の配信形式に対応した75種類のスキルテンプレートが内蔵されており、ローカルの18歳以上向けコンテンツを自動的に認識できます。
HTML Anythingとは何ですか?
HTML Anythingは、nexu-ioチームが開発したエージェント時代向けのオープンソースHTMLエディタです。雑誌、プレゼンテーション、ポスター、小紅書カードなど9種類の配信形式に対応した75種類のスキルテンプレートが内蔵されています。18種類のローカルCode Agent CLIを自動的に認識し、ログイン済みのセッションを再利用できます。APIキーは不要で、あらゆるコンテンツをプロ仕様のHTMLに変換し、WeChat、X、Zhihuなどのプラットフォームにワンクリックで公開できます。
HTML Anythingの主な機能
- 9つの配信モデルを網羅する75のスキルテンプレートこれには、雑誌記事、Keynoteプレゼンテーション、履歴書、ポスター、小紅書カード、ツイートカード、ウェブプロトタイプ、データレポート、Hyperframesビデオなど、9種類のプロフェッショナルな配信形式に対応した、カスタマイズ可能な75種類のスキルテンプレートが含まれています。
- 18のローカルコードエージェントの自動認識ローカルPATHを自動的にスキャンして18種類のCode Agent CLI(Claude Code、Cursor、Codex、Geminiなど)を識別し、APIキーを設定することなく既存のログインセッションを直接再利用できるようにします。
- 11種類の主要なファイル形式のアップロードに対応コンテンツ入力ソースとして、Markdown、TXT、CSV、Excel、JSON、SQL、YAML、HTML、PNG、JPGなど、11種類の主要なファイル形式のアップロードをサポートしています。
- SSEストリーミングリアルタイムレンダリングローカルエージェントが生成したHTMLコードをリアルタイムでブラウザに送信するためにSSE(Server-Sent Events)プロトコルを使用し、生成とプレビューを同時に行うストリーミング体験を実現します。
- iframe サンドボックスのセキュリティプレビューユーザーが生成したHTMLは、メインプロセスから完全に隔離された独立したiframeサンドボックス内で実行されるため、安全で信頼性の高いプレビュー環境が確保されます。
- ワンクリックでエクスポートして複数のプラットフォームに公開WeChat公式アカウントへのCSSインライン貼り付け、X/Weibo/Xiaohongshuの2× DPI PNG、ZhihuのLaTeX処理、単一ファイルHTMLダウンロードなど、複数のワンクリックエクスポート方法を提供しています。
WeChatでフォローして「オープンソース「、参加するAIオープンソースプロジェクトに関するディスカッショングループ
HTMLの技術的原則
- ローカルファーストとエージェント再利用アーキテクチャシステムPATHをスキャンすることでインストール済みのCode Agent CLIツールを自動的に検出し、ユーザーの既存のログインセッションとサブスクリプション権限を再利用し、追加のAPIキー設定やクラウドサービスへの接続を必要とせずに、限界費用ゼロの呼び出しを実現します。
- SSEストリーミングプロトコルフロントエンドは、サーバー送信イベントを使用して永続的な一方向接続を確立し、エージェントによって生成されたHTMLコードをストリーミング方式でブラウザに送信することで、リアルタイムの増分レンダリングと即時のプレビューフィードバックを実現します。
- 設計制約システム各スキルテンプレートには、CJK推奨フォントスタック、8pxベースライングリッド、コントラスト4.5以上、その他のデザイン制約など、厳格なタイポグラフィガイドラインが組み込まれており、出力がプロの出版レベルの視覚品質に達することを保証します。
- サンドボックス分離セキュリティメカニズム生成されたHTMLは、メインアプリケーションプロセスから隔離された独立したiframeサンドボックス内で実行されるため、悪意のあるスクリプトの実行を防ぎ、ローカルデータとシステムのセキュリティを確保します。
HTML Anythingの使い方
- 環境準備Node.jsとpnpmがローカルにインストールされていること、および少なくとも1つのCode Agent CLI(Claude Codeなど)が事前にインストールされ、ログインされていることを確認してください。
- クローンプロジェクト
- 埋め込む
git clone https://github.com/nexu-io/html-anythingこのコマンドは、プロジェクトのソースコードをローカルマシンにダウンロードします。 - 依存関係をインストールしますプロジェクトディレクトリに入る
cd html-anything追いかけるpnpm install依存パッケージのインストールをすべて完了してください。 - サービスを開始する:走る
pnpm devローカル開発サーバーを起動し、ブラウザ経由でアクセスしてください。http://localhost:3000エディタインターフェースに入ります。 - エージェントを選択インターフェース上部のドロップダウンメニューから、システムが自動的に検出したローカルのコードエージェント(Claude Codeなど)を選択してください。
- タスクを作成する「新規タスク」をクリックし、ファイルをアップロードするかコンテンツを入力し、該当するスキルテンプレートの種類を選択します。
- プレビューを生成エージェントは入力されたコンテンツを自動的に処理し、HTMLをストリーミング配信するため、右側のサンドボックスプレビュー領域でレイアウトをリアルタイムで確認できます。
- エクスポートして公開する「エクスポート/コピー」をクリックし、WeChat、X、小紅書、知乎を選択するか、HTML/PNGをダウンロードして公開プロセスを完了します。
HTML Anythingの主な利点
- 限界費用ゼロの操業追加のAPIキーやクラウドサービスを購入する必要なく、ローカルでログインしたエージェントCLIセッションを直接再利用できます。
- プロフェッショナルな出版品質75種類のテンプレートすべてに、完全なデザインシステム制約が備わっており、すべての出力がプロの出版レベルの視覚的品質を満たすことを保証します。
- クロスプラットフォーム対応のワンクリック公開WeChat、X、小紅書、知乎といった主要な国内プラットフォームにワンクリックで対応し、プラットフォームごとに繰り返し行うフォーマット作業を完全に排除します。
- 地域におけるプライバシーとセキュリティの保護すべてのデータはまずローカルで処理され、コンテンツはクラウドにアップロードされません。サンドボックスによるプレビュー機能と組み合わせることで、プライバシーとセキュリティは完全に保証されます。
HTML Anythingのプロジェクトアドレス
- GitHubリポジトリ:https://github.com/nexu-io/html-anything
HTML Anythingと類似の競合製品との比較
| 比較対象寸法 | html-anything | Marp | reveal.js |
|---|---|---|---|
| 製品ポジショニング | エージェント駆動型ローカルマルチモーダルHTMLエディタ | オープンソースのMarkdownからHTMLへのスライドショーエンジン | オープンソースのHTMLプレゼンテーションフレームワーク |
| AI統合 | 18個のローカルコードエージェントを自動的に識別し、APIコストゼロでセッションの再利用を可能にします。 | ネイティブなAI機能を搭載しておらず、Markdown記法による手動記述が必要となる。 | ネイティブなAI機能がないため、HTML/Markdownは手動で記述する必要がある。 |
| 入力形式 | 11種類のファイル形式のアップロードに対応しており、HTMLはエージェントによって自動的に生成されます。 | Markdownファイルの入力のみをサポートしています。 | HTMLのネイティブサポートに加え、プラグインによるMarkdownのサポートも提供しています。 |
| 出力形式 | 雑誌、プレゼンテーション資料、ポスター、カード、履歴書、ビデオなど、9種類の配信形式。 | HTMLスライドショーのみを生成する | HTMLスライドショーのみを生成する |
| デザインシステム | CJK優先フォントスタックと厳格なタイポグラフィ上の制約を含む75種類のテンプレート | CSSテーマでスタイルをカスタマイズ | 複数の組み込みテーマが用意されていますが、詳細はご自身で調整する必要があります。 |
| プラットフォームリリース | WeChat、X、小紅書、知乎などに対応したネイティブ形式へのワンクリックエクスポート。 | HTML、PDF、またはPPTX形式でエクスポート | HTMLとしてエクスポートするか、静的ウェブページとしてデプロイする |
| 使用しきい値 | ゼロコード操作:エージェントがアップロード後にファイルを自動的にフォーマットします。 | Markdownの構文とテーマの設定に精通している必要があります。 | HTML/CSSまたはMarkdownプラグインの設定に関する熟練度が必要です。 |
HTML Anythingの応用シナリオ
- セルフメディアコンテンツのレイアウトセルフメディア運営者は、ワンクリックでMarkdown形式の下書きを、WeChat公式アカウント、小紅書、Twitter向けに最適化された美しいフォーマットのコンテンツに変換できます。
- ビジネスプレゼンテーション制作プロフェッショナルは、スイスインターナショナルスタイルやプレミアム編集などのスタイルテンプレートを使用して、プロ仕様のビジネスプレゼンテーションを迅速に作成できます。
- データレポートの視覚化データアナリストは、CSVまたはExcelデータを、プロフェッショナルなグラフとレイアウトを備えたインタラクティブなHTMLデータレポートに変換します。
- ビデオストーリーボード動画制作者は、Hyperframesのテンプレートを使用して動画のストーリーボードを生成でき、それをRemotionやHeyGenのレンダリングに直接使用できます。