toolsmith-editor-desktop

Markdown を、あなたのフォルダのまま。ローカルファイルに直接書く、macOS 向けデスクトップエディタ。

toolsmith-editor-desktop は、tinyjs（txiki.js + ネイティブ WebView）で構築したローカルファーストの Markdown ワークスペースです。ワークスペースのフォルダを開き、配下の .md / .markdown をそのまま編集できます。リッチテキストの書き心地と Markdown の可搬性を両立し、変更は端末内のファイルへ自動保存されます。

書く、整える、持ち出す。その流れを、端末内で完結させる。 クラウドへのアカウント登録も、原稿の送信も不要です。ファイルは選んだフォルダに残り、他のエディタや Git とそのまま併用できます。

クイックリンク: 公開サイト · Releases · 実装プラン · 開発メモ · Issues

ダウンロード

Toolsmith Editor Desktop v0.1.0 を公開しています。macOS 15 以降の Apple Silicon / Intel に対応した Universal ビルドです。

本ビルドは Apple Developer ID 署名・公証を行っていません（ad-hoc 署名）。初回起動時に警告が出た場合は、アプリを右クリック →「開く」を選択してください。

コンセプト

なぜ「Desktop」なのか

ブラウザ完結の Web 版は手軽ですが、原稿の保存先はブラウザのストレージに閉じます。Desktop 版はその制約を外し、ユーザーが選んだフォルダを唯一の保存先にしました。エディタを閉じてもファイルはそこに残り、Finder、他のエディタ、Git、Quarto など、既存のワークフローからそのまま扱えます。

体験	toolsmith-editor-desktop の対応物
書く	Lexical ベースのリッチテキスト編集（見出し・リスト・引用・表・リンク・コード）
確かめる	Markdown ソースのリアルタイムプレビュー（GFM テーブル対応）
残す	ワークスペースのファイルへ直接自動保存
守る	外部変更・削除を監視し、競合時は再読み込み / 上書きを選択
鳴らす	```abc / ```music-abc ブロックを楽譜描画・再生
持ち出す	Markdown / HTML / JSON / Quarto / Plain Text へネイティブ保存

設計方針

ファイルが主役 — アプリ独自のデータベースを正とせず、ローカルの Markdown を直接読み書きする
保存を見える化 — 保存中・保存済み・未保存・競合をステータスバーに常時表示する
ネイティブな操作感 — 保存パネル、アラート、メニュー、ショートカットは OS の作法に合わせる
壊さない — 一時ファイル + rename の atomic write と、外部変更の競合検知で原稿を守る

主な特徴

機能

ワークスペース — フォルダを選択すると配下の Markdown を一覧表示。作成・名前変更・削除・再読み込みに対応
リッチテキスト編集 — 太字、斜体、下線、取り消し線、インラインコード、下付き・上付き、H1〜H6、各種リスト、チェックリスト、引用、コードブロック、リンク、表
Markdown 同期 — 編集内容を Markdown へ変換してソースプレビューに反映。Markdown ショートカット入力にも対応
自動保存と競合解決 — 編集停止後にファイルへ保存。外部で変更・削除された場合はダイアログで「再読み込み」「上書き」「キャンセル」を選択
ABC 記法 — 楽譜ブロックを abcjs で描画し、再生・一時停止・停止・テンポ（QPM）調整が可能
Webクリップ — URLを入力すると本文を抽出してMarkdown化。現在の文書の末尾へ追記するか、新しい .md としてワークスペースへ保存。ログインが必要なページは外部ブラウザで開ける
設定ファイル — UIテーマ、プレビュー表示、自動保存の待ち時間、既定の書き出し先をJSONファイルへ保存。ヘッダーの「設定」または表示メニューから変更でき、設定ファイルをFinderで開ける
ネイティブメニュー — ファイル / 編集 / 表示メニューと、新規（⌘N）・フォルダを開く（⇧⌘O）・保存（⌘S）・プレビュー切替（⇧⌘P）などのショートカット
UIテーマ切替 — ヘッダーのボタンで cosmic-ui（Sci-Fi）、neo-brutalism-ui（太い罫線・ハードシャドウ）、cupertino-ui（iOS / iPadOS 風・タッチ操作向け）を切り替え。選択はローカルに保存
書き出し — OS の保存パネルから Markdown / HTML / JSON / Quarto / Plain Text を任意の場所へ保存
Quarto CLI 連携 — インストール済みの Quarto CLI で HTML（単体ファイル）または PDF をレンダリング。Quarto 未導入時は HTML 単体出力へフォールバック
ドラッグ＆ドロップ — Finder から Markdown をドロップして即時オープン

アーキテクチャ

フロントエンド: Vite + React 18 + Lexical 0.32
スタイリング: Tailwind CSS v4 + cosmic-ui / neo-brutalism-ui / cupertino-ui（切り替え可能な3テーマ）
デスクトップ基盤: tinyjs 0.60+（txiki.js バックエンド + ネイティブ WebView）
バックエンド: ファイル I/O、ワークスペース監視、パス検証、atomic write、Webページ取得、Quarto CLI 実行、設定ファイル管理
ブリッジ: window.tiny を薄くラップした src/frontend/lib/desktop.ts

データとセキュリティ

原稿は選択したフォルダのファイルとして保存され、外部サーバーへ送信されません
アカウント登録、テレメトリ、クラウド同期はありません
最後に開いたワークスペースのパスなどは、アプリのデータフォルダにある settings.json に保存します（テーマ、プレビュー表示、自動保存、既定の書き出し先も同ファイル）
ワークスペース内の読み書きはバックエンドのパスガードで検証し、エクスポート先は OS の保存パネルで選ばれたパスのみに書き込みます
Webクリップは入力されたURLへ直接アクセスしてHTMLを取得します。認証情報は保持せず、ログインが必要なページは外部ブラウザへ誘導します

インストールとビルド

前提条件

ツール	必要バージョン	確認コマンド
macOS	15 以降	`sw_vers`
Node.js	>= 20	`node --version`
tinyjs	>= 0.60	`tinyjs --version`

tinyjs は公式サイトの手順でインストールしてください。

基本的な手順

リポジトリを取得

git clone https://github.com/watanabe3tipapa/toolsmith-editor-desktop.git
cd toolsmith-editor-desktop

依存をインストール

npm install

ネイティブウィンドウで起動

tinyjs dev

フロントエンドは Vite（http://127.0.0.1:5173）で起動し、tinyjs がネイティブウィンドウで読み込みます。初回はワークスペースのフォルダを選択してください。

アプリをビルド

tinyjs build

dist/ に .app が生成されます。フロントエンドのみのビルドは npm run build です。

主要コマンド

コマンド	用途
`tinyjs dev`	ネイティブウィンドウで開発起動（HMR）
`npm run dev`	Vite 開発サーバーのみ起動
`npm run build`	フロントエンドを `dist/` へビルド
`npm run preview`	ビルド済みフロントエンドをプレビュー
`npm run lint`	ESLint による静的解析
`tinyjs build`	macOS アプリ（`.app`）をビルド

リリース

tinyjs.json の version を更新してコミットし、同じ番号のタグを push すると、Release workflow が Universal ビルド、zip 作成、SHA-256 生成、GitHub Release 作成まで実行します。

git tag v0.1.1
git push origin v0.1.1

タグと tinyjs.json の version が一致しない場合は失敗します。Actions から手動実行する場合は既存のタグを指定してください。publish を有効にしない限り、ビルドと artifact 保存のみで Release は更新されません。

公開

LP は main ブランチへの push を契機に GitHub Actions がデプロイし、GitHub Pages で公開します。

パス	内容
`/`	ランディングページ（`docs/`）
`/toolsmith_editor_desktop_plan.html`	tinyjs 版の実装プラン
`assets/`	LP 用のアイコン

アプリ本体は Web 配信せず、macOS 向けビルドを GitHub Releases で配布する想定です（v0.1.0 時点ではビルド手順のみ）。

ディレクトリ構成

src/
├── backend/                        # txiki.js バックエンド
│   ├── main.js                     # エントリポイント / ファイルオープン通知
│   ├── workspace.js                # ワークスペース・ファイル I/O・監視
│   ├── web-clip.js                 # Webページ取得・外部ブラウザ起動
│   ├── quarto.js                   # Quarto CLI の検出・レンダリング
│   ├── settings.js                 # settings.json の読み書き・検証
│   └── path-guard.js               # パス検証・エラー整形
└── frontend/                       # WebView フロントエンド
    ├── App.jsx                     # レイアウト
    ├── main.jsx                    # エントリポイント
    ├── components/
    │   ├── Editor.tsx              # Lexical 編集・自動保存・競合解決
    │   ├── Toolbar.tsx             # 書式・挿入・エクスポート
    │   ├── FileSidebar.tsx         # ワークスペースのファイル一覧
    │   ├── MarkdownPreview.tsx     # Markdown ソース表示
    │   ├── AbcSheet.tsx            # ABC 記法の描画・再生
    │   ├── WebClipModal.tsx        # Webページ取り込みダイアログ
    │   ├── SettingsModal.tsx       # 設定ダイアログ
    │   ├── LinkEditorModal.tsx     # リンク入力
    │   └── ErrorBoundary.tsx       # 例外フォールバック
    ├── lib/
    │   ├── desktop.ts              # tinyjs ブリッジ
    │   ├── export.ts               # エクスポート生成・ネイティブ保存
    │   ├── web-clip.ts             # Readability + Turndown で本文抽出
    │   ├── settings.ts             # 設定の読み込み・更新・移行
    │   ├── menu.ts                 # ネイティブメニュー定義
    │   ├── themes.ts               # UIテーマの一覧・判定・切り替え順
    │   ├── theme.ts                # UIテーマの適用・永続化
    │   ├── markdown.ts             # Lexical トランスフォーマー
    │   ├── table.ts                # GFM テーブル変換
    │   └── constants.ts            # 既定文書など
    ├── cosmic-ui/                  # Sci-Fi テーマの UI 部品
    ├── neo-brutalism-ui/           # neo-brutalismテーマ（CSS）
    └── cupertino-ui/               # iOS / iPadOS風テーマ（CSS）

docs/                               # GitHub Pages（LP）
.github/workflows/pages.yml         # Pages デプロイ
DEV-MEMO.md                         # 実装メモ
tinyjs.json                         # tinyjs アプリ設定

使い方

起動後、「フォルダを選択」から原稿のあるフォルダを開きます
サイドバーから Markdown を選択、または「＋」で新規作成します
ツールバーで書式を整え、必要ならソースプレビューを確認します
編集内容は自動保存されます。手動保存は ⌘S、または保存ボタンから
Webページを取り込むときは「Webクリップ」ボタン、または「ファイル → Webページを取り込む…」からURLを入力します。抽出結果は現在の文書へ追記するか、新しいMarkdownファイルとして保存できます
書き出したいときはツールバーのエクスポート、または「ファイル → エクスポート」から形式を選択します。Quarto CLI を導入済みなら「QuartoでHTML…」「QuartoでPDF…」でレンダリングできます（PDF には LaTeX / TinyTeX が必要です）
テーマ、プレビュー表示、自動保存の待ち時間、既定の書き出し先は、ヘッダーの「設定」から変更できます。設定はアプリのデータフォルダの settings.json に保存されます

既知の制約とロードマップ

v0.1.0

次の候補

内蔵Webパネル（アプリ内ブラウザ表示、#1）
メニューの checked 状態とプレビュー表示の同期
Windows / Linux 向けビルド
署名・公証を含む配布パイプライン

制約

現在の対象は macOS 15 以降です
ワークスペース直下の Markdown のみを一覧表示します（サブフォルダは未対応）
アプリ本体の Web 配信は行いません
Quarto レンダリングはコードチャンクを実行しません（--no-execute）。図表の生成など実行が必要な文書は Quarto CLI 側でレンダリングしてください

ドキュメント

公開サイト — ランディングページ
実装プラン — tinyjs 版の設計方針
DEV-MEMO.md — 実装の経緯・判断・検証記録

コントリビューション

コントリビューションは歓迎します。大きな変更を行う前に Issue を立てて相談してください。一般的な手順:

リポジトリをフォーク
機能ブランチを作成 (git checkout -b feature/your-feature)
変更をコミット (git commit -m 'Add your feature')
ブランチをプッシュし、Pull Request を作成

連絡先

GitHub: https://github.com/watanabe3tipapa/toolsmith-editor-desktop
公開サイト: https://watanabe3tipapa.github.io/toolsmith-editor-desktop/

ライセンス

MIT ライセンス — 詳細はリポジトリの LICENSE ファイルを参照してください。

TOOLSMITH EDITOR は個人プロジェクトです。tinyjs、txiki.js、Lexical、abcjs、cosmic-ui はそれぞれのライセンスに従います。

Name		Name	Last commit message	Last commit date
.github		.github
assets		assets
docs		docs
src		src
.gitignore		.gitignore
DEV-MEMO.md		DEV-MEMO.md
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tinyjs.json		tinyjs.json
vite.config.js		vite.config.js

Navigation Menu

Repository navigation

About

Repository files navigation

toolsmith-editor-desktop

ダウンロード

コンセプト

なぜ「Desktop」なのか

設計方針

主な特徴

機能

アーキテクチャ

データとセキュリティ

インストールとビルド

前提条件

基本的な手順

主要コマンド

リリース

公開

ディレクトリ構成

使い方

既知の制約とロードマップ

v0.1.0

次の候補

制約

ドキュメント

コントリビューション

連絡先

ライセンス

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

toolsmith-editor-desktop

ダウンロード

コンセプト

なぜ「Desktop」なのか

設計方針

主な特徴

機能

アーキテクチャ

データとセキュリティ

インストールとビルド

前提条件

基本的な手順

主要コマンド

リリース

公開

ディレクトリ構成

使い方

既知の制約とロードマップ

v0.1.0

次の候補

制約

ドキュメント

コントリビューション

連絡先

ライセンス

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages