任意のWebサイトのスクリーンショットからHTMLをAIが生成してくれるOSS・「screenshot-to-code」
screenshot-to-code screenshot-to-codeは任意のWebサイトのスクリーンショットからHTMLをAIが生成してくれるOSSです。 具体的にはWebページのスクリーンショットを読み込ませるときれいな...
Resource - reactjs
シンプルで見やすく使いやすいオープンソースのReact UIライブラリ・「WoozDesign」
WoozDesign WoozDesignはシンプルで見やすく使いやすいオープンソースのReact UIライブラリです。Webアプリ用として設計されたみたいです。 無駄のないスタイルでフィンテックや解析、分析、など情報を正しく明...
ドラッグ＆ドロップでWebページを作成できるセルフホスト可能なReact向けコンテンツエディター・「puck」
puck puckはドラッグ＆ドロップでWebページを作成できるセルフホスト可能なReact向けコンテンツエディターです。 上記SSのようによくあるUIのコンテンツエディターでD&Dで操作可能、サードパーティのヘッドレスCMSと...
WordPressを使う感覚でReact製のWebサイトやアプリを運用できるOSS・「WebCrumbs」
WebCrumbs WebCrumbsはWordPressを使う感覚でReact製のWebサイトやアプリを運用できるOSSです。プロジェクトを「ReactのためのWordPress」と位置付けており、Reactアプリの為の業界標準ソリ...
レスポンシブでアクセシブルなUIコンポーネントのライブラリ・「Rafty UI」
Rafty UI Rafty UIはレスポンシブでアクセシブルなUIコンポーネントのライブラリです。デザインシステムの構築を簡単にしてくれるとの事です。 開発しているアプリのデザインシステムとシームレスに連携出来るように開発され...
様々なタイプのReact UIコンポーネントの動作を確認できる・「ReactDemos.com」
ReactDemos.com ReactDemos.comは様々なタイプのReact UIコンポーネントの動作を確認できるWebサイトです。いわゆるUIギャラリーサイトみたいな感じです。 スムーズなリストアイテムのドラッグ&ドロ...
JSONやJavaScriptの配列を見やすく表示したり編集できるようにするReactコンポーネント・「react-json-view」
react-json-view react-json-viewはJSONやJavaScriptの配列を見やすく表示したり編集できるようにするReactコンポーネントです。 テーマ設定やダークモード等も備わっている他、ビューモード...
カスタマイズ可能な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サイトです。 チャートは相関、...
MarkdownもサポートしているReactベースのOSSリッチテキストエディター・「Tide」
Tide TideはMarkdownもサポートしているReactベースのOSSリッチテキストエディターです。 特長としてJSONベースのストレージフォーマット（但しエクスポートではなくプレビューされるみたいです）、Markdow...
three.js用のReactレンダラーであるReact Three Fiber専用に開発されたオープンソースのビジュアルエディター・「Triplex」
Triplex TriplexはReact Three Fiber専用に開発されたオープンソースのビジュアルエディターです。現在のところ、Windows及びMacOSに対応しています。 React Three Fiberはthr...
ReactベースのCRUDアプリ構築フレームワークのrefineでの開発プロセスを効率化する為のWebアプリ・「refine.new」
refine.new refine.newはReactベースのCRUDアプリ構築フレームワークのrefineでの開発プロセスを効率化する為のWebアプリです。 refineについては以前ご紹介しました。 ...
管理画面を高速に構築するの為のオープンソースのReactライブラリ・「Tremor」
Tremor Tremorは管理画面を高速に構築するの為のオープンソースのReactライブラリです。完全なOSSとして提供されており、データサイエンティストとソフトウェアエンジニアによってデザイン、開発されているそうで、データ分析の為...
React Nativeのプロトタイプを作成するためのオープンソースのプロトタイピングツール・「ProtoNative」
ProtoNative ProtoNativeはReact Nativeのプロトタイプを作成するためのオープンソースのプロトタイピングツールです。 Windows及びMacOSに対応したGUIアプリで非常にシンプルなUIで、ネス...
任意のプロンプトからReact + Tailwind.cssコンポーネントを生成してくれるAIコンポーネントジェネレーター・「Microapp.ai」
Microapp.ai Microapp.aiは任意のプロンプトからReact + Tailwind.cssコンポーネントを生成してくれるAIコンポーネントジェネレーターです。 計算機やパスワードジェネレーター等といった単純なア...
Radix UIとTailwind.cssで構築されたオープンソースのコンポーネント集・「shadcn/ui」
shadcn/ui shadcn/uiはRadix UIとTailwind.cssで構築されたオープンソースのコンポーネント集です。コンポーネントライブラリではなく、コレクションとして提供しているそうです。依存関係としてインストールし...
ドキュメントの進行とビジュアル等の表現を連動させるオープンソースのドキュメントツール・「Kodemo」
Kodemo Kodemoはドキュメントの進行とビジュアル等の表現を連動させるオープンソースのドキュメントツールです。 例えばAPIドキュメント等、特に技術文書に向けて開発されており、ハイライトされた画像やコード等を右ペインに表...
ReactベースのCRUDアプリを構築するためのオープンソースのヘッドレスWebアプリケーションフレームワーク・「refine」
refine refineはReactベースのCRUDアプリを構築するためのオープンソースのヘッドレスWebアプリケーションフレームワークです。 Create（作成）、Read（読み取り）、Update（更新）、Delete（削...
ブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれる拡張機能・「Locator.js」
Locator.js Locator.jsはブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれるブラウザ拡張機能です。Chrome、Edge、Brave、Opera、Firefoxなど主要ブラウザは概ね...
パフォーマンス重視でReact専用として作られたオープンソースのStorybook代替・「Ladle」
Ladle LadleはReact専用として作られたオープンソースのStorybook代替です。ControlsとCSFの互換があります。 ご存知の通りStorybookもオープンソースですが、Ladleはパフォーマンスを重視し...
スクロールやマウスの動きに合わせて視差効果を実装するReactライブラリ・「React Just Parallax」
React Just Parallax React Just Parallaxはスクロールやマウスの動きに合わせて視差効果を実装するReactライブラリです。軽量高速で簡単に書けるのが特長だそう。 マウスの動きに合わせた視差効果...
80以上のUIコンポーネントが用意されたオープンソースのReact.js用UIライブラリ・「PrimeReact」
PrimeReact PrimeReactは80以上のUIコンポーネントが用意されたオープンソースのReact.js用UIライブラリです。更に姉妹プロジェクトのprimeiconsで200以上のアイコンも用意されています。 We...