Resource - フロントエンドエンジニア向け

Vercelのv0と同じように、任意のプロンプトからWebのUIを自動生成するオープンソースの代替アプリ・「openv0」

openv0 openv0はVercelの公開したv0と同じように、任意のプロンプトからWebのUIを自動生成するオープンソースの代替アプリです。 ライブプレビューを使用して、React+TailwindのコンポーネントをAIで...

ビジネス向けに開発されたオープンソースのNode.jsベースCMS・「Apostrophe」

Apostrophe Apostropheはビジネス向けに開発されたオープンソースのNode.jsベースCMSです。MITライセンスの元でソースコードが公開されています。 見ているページのその場でスムーズにライブ編集したり、プラ...

OpenAIのChatGPTライクに使えるオープンソースのAIチャット用UI・「Chatbot UI」

Chatbot UI Chatbot UIはOpenAIのChatGPTライクに使えるオープンソースのAIチャット用UIです。 クローンとして設計されているみたいですが、履歴のエクスポート/インポート機能やプロンプトの定型作成、...
Ads

リアルタイムコラボレーションも可能な、シンプルで使いやすいオープンソースのホワイトボードアプリ・「tldraw」

tldraw tldrawはリアルタイムコラボレーションも可能な、シンプルで使いやすいオープンソースのホワイトボードアプリです。 よくあるタイプのホワイトボードで、Share設定する事でユニークなURLに移行し且つQRコードも発...

エンタープライズ向けに設計されたオープンソースのプライバシーファーストなAIチャットアプリ・「Unc」

Unc Uncはエンタープライズ向けに設計されたオープンソースのプライバシーファーストなAIチャットアプリです。「アンク」と読むみたいです。💩ではありません。 AIチャットと言うか、例によってLLMにはOpenAIのAPIが採用...

TypeScriptもサポートの、ブラウザでJavaScriptコードの動作テストが可能なオープンソースのWebアプリ・「PlayJS」

PlayJS PlayJSはTypeScriptもサポートの、ブラウザでJavaScriptコードの動作テストが可能なオープンソースのWebアプリです。 jsfiddleやCodepen等と異なるのは、こちらはHTMLやCSSは...

様々なタイプのReact UIコンポーネントの動作を確認できる・「ReactDemos.com」

ReactDemos.com ReactDemos.comは様々なタイプのReact UIコンポーネントの動作を確認できるWebサイトです。いわゆるUIギャラリーサイトみたいな感じです。 スムーズなリストアイテムのドラッグ&ドロ...

App Routerに対応したオープンソースのNext.js向けeコマーステンプレート・「Next.js Commerce」

Next.js Commerce Next.js CommerceはApp Routerに対応したオープンソースのNext.js向けeコマーステンプレートです。MITライセンスの元でソースコードが公開されています。 Vercel...

AIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネント・「LangUI」

LangUI LangUIはAIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネントです。 AIアプリと言うか、ほぼAIチャット向けのUIという感じで、プロンプトの入力フォームや対話UI...

既存のフォームに簡単にドラッグ&ドロップによるファイルアップローダーを設置できるシンプルなJavaScriptライブラリ・「EasyDropzoneJS」

EasyDropzoneJS See the Pen Untitled by kachibito (@kachibito) on CodePen. EasyDropzoneJSは既存のフォームに簡単にドラッ...

プレビューを見ながら編集できるオープンソースのシンプルな請求書作成アプリ・「Invoice Kitchen」

Invoice Kitchen Invoice Kitchenはプレビューを見ながら編集できるオープンソースのシンプルな請求書作成アプリです。 プレビューと言うか、既にレイアウト済みのページで直接編集できるようになっている、とい...

チームで使える、生産性向上のために設計されたオープンソースのファイルマネージャーアプリ・「Onyx」

Onyx Onyxはチームで使える、生産性向上のために設計されたオープンソースのファイルマネージャーアプリです。設計にあたり、Rust、Tauri、React、TSが採用されています。 ドキュメントや画像、動画などを分かりやすく...

Webサイトに追加可能なMarkdownベースの軽量なオープンソースCMS・「Penmark」

Penmark PenmarkはWebサイトに追加可能なMarkdownベースの軽量なオープンソースCMSです。 ログイン、ドラフト、編集の3つのコンポーネントで既存サイトに埋め込めるCMSと謳っており、複数のWebサイトの切り...

JSONやJavaScriptの配列を見やすく表示したり編集できるようにするReactコンポーネント・「react-json-view」

react-json-view react-json-viewはJSONやJavaScriptの配列を見やすく表示したり編集できるようにするReactコンポーネントです。 テーマ設定やダークモード等も備わっている他、ビューモード...

フォームに記入するだけで請求書や領収書を作成してPDFに出力できるOSS・「Invoice Dragon」

Invoice Dragon Invoice Dragonはフォームに記入するだけで請求書や領収書を作成してPDFに出力できるオープンソースのWebアプリです。 表題の通りで、必要事項をフォームに入力すればあらかじめ用意された請...

npmやyarnのインストールコマンドをワンクリックでコピーできる、シンプルUIで使いやすいパッケージ検索アプリ・「EasyNPM」

EasyNPM EasyNPMはnpmやyarnのインストールコマンドをワンクリックでコピーできる、シンプルUIで使いやすいパッケージ検索アプリです。 npmjs代替として開発したそうで、パッケージ検索に掛ける時間や手間を減らす...

カスタマイズ可能なReact向けのリッチテキストエディターOSSフレームワーク・「Plate」

Plate PlateはReact向けのリッチテキストエディターOSSフレームワークです。名前からピンと来た方もいるかもしれませんが、slateを使ったテキストエディター開発をサポートする為のツールキットとなっています。 sla...

ReactとD3.jsを使って様々なチャートでデータを可視化する方法とサンプルコードを紹介する・「the React Graph Gallery」

the React Graph Gallery the React Graph GalleryはReactとD3.jsを使って様々なチャートでデータを可視化する方法とサンプルコードを紹介するTipsサイトです。 チャートは相関、...

Webサイトツアーや任意の要素のハイライト、ヘルプを表示する等を実装できる軽量で非依存のJavaScriptライブラリ・「Driver.js」

Driver.js Driver.jsはWebサイトツアーや任意の要素のハイライト、ヘルプを表示する等を実装できる軽量で非依存のJavaScriptライブラリです。 APIが充実しており、幅広い用途で利用できるようになっています...

Tailwindコンポーネントをノーコードで作成、編集し、コードをコピーして利用できる・「Mytailwind」

Mytailwind MytailwindはTailwind.cssのコンポーネントをノーコードで作成、編集し、コードをコピーして利用できるWebアプリです。 ボタン、ナビゲーションバー、カード、サイドバー、アラート、画像、チッ...

Tailwind.cssベースのパワフルで軽量なオープンソース管理画面テンプレート・「Tailbreeze」

Tailbreeze TailbreezeはTailwind.cssベースのパワフルで軽量なオープンソース管理画面テンプレートです。 この手のテンプレートはご存知のように数えきれないほど出回っていますが、Tailbreezeは中...

MarkdownもサポートしているReactベースのOSSリッチテキストエディター・「Tide」

Tide TideはMarkdownもサポートしているReactベースのOSSリッチテキストエディターです。 特長としてJSONベースのストレージフォーマット(但しエクスポートではなくプレビューされるみたいです)、Markdow...
Ads