開閉パネルやアコーディオン、タブなど切り替え要素のあるUIの為の軽量JavaScriptライブラリ・「Tiny UI Toggle」
Tiny UI Toggle Tiny UI Toggleは開閉パネルやアコーディオン、タブなど切り替え要素のあるUIの為の軽量JavaScriptライブラリです。 なるべく少ないコードで汎用的なUIを使う、みたいな試みで、カス...
Resource - JavaScript
パフォーマンスを重視した高速で軽量なカルーセル/スライダーライブラリ・「Swiffy Slider」
Swiffy Slider See the Pen Untitled by kachibito (@kachibito) on CodePen. Swiffy Sliderはパフォーマンスを重視した高速で軽量な...
カレンダーサービスに任意のイベントを追加するボタンを設置する為のJavaScript・「Add-to-Calendar Button」
Add-to-Calendar Button See the Pen Untitled by kachibito (@kachibito) on CodePen. Add-to-Calendar Butto...
50以上のUIコンポーネントを提供する、モダンなWebアプリケーションを構築するためのOSS・「PoemKit」
PoemKit PoemKitは50以上のUIコンポーネントを提供する、モダンなWebアプリケーションを構築するためのオープンソースのWeb開発キットです。 Reactを使ったUIキットで、サーバーサイドレンダリングによる高速な...
モダンで柔軟なデザインシステムを提供するオープンソースのReact UIライブラリ・「Semi UI」
Semi UI Semi UIはモダンで柔軟なデザインシステムを提供するオープンソースのReact UIライブラリです。TikTokフロントエンド技術チームによって開発されています。 UIコンポーネントは大量に用意されており、W...
カーソルの外観や動作などの高度なカスタマイズが可能なオープンソースのライブラリ・「Blobity」
Blobity Blobityはカーソルの見た目や動きなどの高度なカスタマイズが可能なOSSのJavaScriptライブラリです。 形状や色、サイズからアニメーション、背景に応じた色の変化、任意の要素にフォーカスした際に形状変化...
データを可視化し、グラフから別のグラフへアニメーション推移させる事が出来るスクリプト・「Vizzu」
Vizzu See the Pen Untitled by kachibito (@kachibito) on CodePen. Vizzuはデータを可視化し、グラフから別のグラフへアニメーション推...
UIコンポーネントを構築するための軽量、シンプルで非依存なJavaScriptライブラリ・「jCore」
jCore jCoreはUIコンポーネントを構築するための軽量、シンプルで非依存なJavaScriptライブラリです。 👆のサンプルはドラッグできるコンテンツをネストしたものになります。APIは使いやすいよう設計されている印...
タッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリ・「Atropos」
Atropos Atroposはタッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリです。 PCではマウスホバーで、タッチデバイスではドラッグで動かす事が出来ます。非依存で軽量なので手軽に導入する事が...
高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」
LittleJS LittleJSは高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジンです。他ライブラリに依存せずに動作してくれます。 軽量、シンプルで、様々なゲーム開発に使えるライブラリを目...
Web Animations APIを使った軽量で高速なオープンソースのアニメーションライブラリ・「Motion One」
Motion One Motion OneはWeb Animations APIを使った軽量で高速なオープンソースのアニメーションライブラリです。 使い方も以下のようにとてもシンプルで、軽量なAnime.jsのさらに半分のファイ...
GUIも備わったモーショングラフィックスの為のアニメーションJavaScriptライブラリ・「Theatre.js」
Theatre.js Theatre.jsはモーショングラフィックスの為のアニメーションJavaScriptライブラリです。GUIのエディターも備わってるそうです。 実際にビジュアルで動きを見ながら直感的な操作でアニメーションを...
画像内に注釈を挿入するJavaScriptライブラリ・「marker.js」
marker.js marker.jsは画像内に任意の注釈を挿入するJSライブラリです。画像の中に任意のテキストやエリアの塗りつぶし、線引きなどを挿入できて装飾も可能となっています。 また、marker.js Liveという拡張...
WebサイトやWebアプリ構築の為の次世代TypeScriptフレームワーク・「Factor.js」
Factor.js Factor.jsはWebサイトやWebアプリ構築の為の次世代TSフレームワークです。ブログやLP、JamStackアプリの作成等を容易に行えるよう設計されています。開発者はDarwinです。 プラグイン等に...
Webアプリ向けに開発されたReactベースのUIデザインシステム・「Welcome UI」
Welcome UI Welcome UIはWebアプリ向けに開発されたReactベースのUIデザインシステムです。reactをベースに、styled-components、styled-system、reakitなどが導入されていま...
Webサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツール・「Sa11y」
Sa11y Sa11yはWebサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツールです。 下記のコードを挿入する事でWebページのアクセシビリティチェックを行う事が出来ます。 ...
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」
DFlex DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要...
画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプト・「tobii」
tobii tobiiは画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプトです。 任意のHTML要素や画像だけでなく、YoutubeやVimeoなどの動画や任意のWebページなども可能...
ブラウザで使える超シンプルなオープンソースのコードエディター・「Smart Text Editor」
Smart Text Editor Smart Text Editorはブラウザで使える超シンプルなオープンソースのコードエディターです。ブラウザとキーボード操作だけで使えるよう設計されており、JavaScriptで書かれています。 ...
Tailwind.cssのユーティリティクラスをBootstrapやBlumaなど他のCSSフレームワークで使えるようにする拡張スクリプト・「Foxtail」
Foxtail Foxtailは、読み込むだけで他のCSSフレームワークでTailwind.cssのユーティリティクラスを使えるようにするCSSフレームワーク拡張スクリプトです。 BootstrapやBluma、UIkitやFo...
スプレッドシートライクな表計算ツールを提供するJavascriptライブラリ・「xcell」
xcell xcellはスプレッドシートライクな、リアクティブな表計算ツールを提供するJavascriptライブラリです。 例えば通常は以下のようになりますよね。 xcellでは以下のように計算する事が出来ます。 ...
シンプルな2ペインのReact製Markdownエディター・「react-md-editor」
react-md-editor react-md-editorはシンプルで使いやすい2ペインのReact製Markdownエディターです。従来品同様に記述エリアとプレビューエリアに分かれており、即反映されるようになっています。 ...