様々なタイプのReact UIコンポーネントの動作を確認できる・「ReactDemos.com」
ReactDemos.com ReactDemos.comは様々なタイプのReact UIコンポーネントの動作を確認できるWebサイトです。いわゆるUIギャラリーサイトみたいな感じです。 スムーズなリストアイテムのドラッグ&ドロ...
Resource - フロントエンドエンジニア向け
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...
使いやすさ重視で開発されたオープンソースのモニタリングツール・「Uptime Kuma」
Uptime Kuma Uptime Kumaは使いやすさ重視で開発されたオープンソースのモニタリングツールです。シンプルで使いやすい監視アプリを、という事のようですが機能はパワフルな印象でした。 Kumaは「熊」の事だそうです...
Alpine.jsとTailwin.cssの為のオープンソースUIライブラリ・「Pines」
Pines PinesはAlpine.jsとTailwin.cssの為のオープンソースUIライブラリです。両方を使用しているプロジェクトにコピペで導入できるUIを提供しています。 AlpineとTailwindを併用することで、...
ReactベースのCRUDアプリ構築フレームワークのrefineでの開発プロセスを効率化する為のWebアプリ・「refine.new」
refine.new refine.newはReactベースのCRUDアプリ構築フレームワークのrefineでの開発プロセスを効率化する為のWebアプリです。 refineについては以前ご紹介しました。 ...
管理画面を高速に構築するの為のオープンソースのReactライブラリ・「Tremor」
Tremor Tremorは管理画面を高速に構築するの為のオープンソースのReactライブラリです。完全なOSSとして提供されており、データサイエンティストとソフトウェアエンジニアによってデザイン、開発されているそうで、データ分析の為...
機能充実で拡張も可能、シンプルで使いやすいオープンソースのプロジェクト管理ツール・「Rootspace」
Rootspace Rootspaceは機能充実で拡張も可能、シンプルで使いやすいオープンソースのプロジェクト管理ツールです。 オンラインでのチーム間におけるコラボレーション作業やタスク管理が必要なプロジェクトに最適且つ必要な機...
ビジュアルプログラミングのためのTypeScriptファーストなフレームワーク・「Rete.js」
Rete.js Rete.jsはビジュアルプログラミングのためのTypeScriptファーストなフレームワークです。MITライセンスの元でソースコードが公開されています。 ビジュアライズだけでなく、グラフ処理モジュールを提供する...