Zenn
📝

あなたのウェブサイトのためのビジュアルエディター – 無料 & オープンソース

に公開
JavaScript
Next.js
webアプリ
i18n
content
tech

あなたのウェブサイトにコンテンツがありますか？
コードを触らずにビジュアルで編集できたらいいなと思ったことはありませんか？

Intlayer Visual Editor は、無料でオープンソースのツールで、ウェブアプリのコンテンツをビジュアルインターフェース上で直接編集できます。

なぜ Intlayer Visual Editor なのか？

  • 多言語対応 – 複数の言語でコンテンツを簡単に管理
  • Markdown 対応 – 静的サイトや開発者に最適
  • 外部ファイルの編集 – .md、.txt などの形式をサポート
  • オープンソース & 無料 – 必要に応じて修正や拡張が可能

試してみる: https://intlayer.org/playground

問題やアイデアがある場合: GitHub リポジトリ

仕組み

このビジュアルエディターは以下の2つの部分で構成されています：

  1. フロントエンドアプリケーション – iframe 内にウェブサイトを読み込み、編集可能なコンテンツを検出
  2. サーバーサイドプロセス – 保存時にコンテンツ定義ファイル（現在は JSON 形式）を更新

インストール & セットアップ

Intlayer をプロジェクトに設定したら、intlayer-editor をインストールします：

npm install intlayer-editor --save-dev

次に、intlayer.config.ts を設定：

const config = {
  editor: {
    applicationURL: "http://localhost:3000",
  },
};
export default config;

エディターの使用方法

インストール後、エディターを起動：

npx intlayer-editor start

その後、ブラウザで http://localhost:8000 を開き、コンテンツにホバーして編集！ 🎨

コミュニティに参加しよう！

このプロジェクトは 100% オープンソース です！
貢献したい、問題を報告したい、機能を提案したい方は：

GitHub リポジトリ: https://github.com/aymericzip/intlayer

🎉 皆さんのフィードバックをお待ちしています！開発者にとって、コンテンツ編集をもっと簡単にしましょう！ 🚀

Discussion