A complete collection of Okiba core features

Usage no npm install needed!

<script type="module">
  import okibaCore from 'https://cdn.skypack.dev/@okiba/core';


Okiba Core

Tests Status Maintainability Test Coverage 🏅

Sharp collection of tools for front-end development, created with performance in mind. 🗡

Our primary concerns are: maximum FPS and minimum bundle size 🚀

You can visualize it as a bag full of ninja tools for you to pick and use to tackle your front-end challenges.

Okiba is:

A set of tools you can use separately.

It is meant to level-up and ease-in your web-development routines.

It's designed so that you can drop-in as much or as less you want, by importing just what you actually use, up to a single function level, so that your final bundle will stay slim.

It is always evolving and open to contributons from OSS peers.

Okiba is not:

A library, framework or language.

It is not meant to replace the tools you already have, but rather offer battle-tested solutions to common routine tasks; sometimes it offers a cheaper alternative.

It does not impose choiches and integrates smoothly with frameworks you already use.

We strive to achieve affidability and affordability.

Our granularity is fine

We export single units that you can import separately. ✨

This way tree-shake and uglification can work at their best.

Being dependency-free you always know what you're using and can look it up in our API, no surpises.

Our code is DRY and minimal

If something is common we abstract it away. 💡

We don't put something in until it is actually needed.

We strictly check for duplication and complexity, and take charge of some development pain in order to keep bundle size small.

Our seriousness level is high

Our quality checks are automated. 🤖

Metrics matter, so our CI tools help us by enforcing 100% coverage and A maintainability.

No line makes it into master if the overall code quality gets degraded.

We could state that our API is 100% documented, but we still have no tests in place to back this metric up... so we don't 🤡


You can grab all Okiba Core packages by using npx installer:

npx @okiba/core


Untranspiled code 🛑

Okiba Core packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']

Full API List:


Array utils for okiba js

arrayOrOne, castArray, spliceOne


Utilities that operate on classes



Manages a DOM component, binds UI and recursively binds child components. Can be extended or instantiated

constructor, onDestroy, destroy


Utilities to work with dom elements and selectors

byId, qs, qsa, on, off, eventCoords, offset, getElements, matches, isChildOf, delegate, createCustomEvent


Emits drag events for all common pointers kinds (touch & mouse)

constructor, destroy


Collection of easings to alter a value


Emits events that can be listened and unlistened to. Allows for a catch-all event which is always triggered.

on, off, emit, hasListeners, destroy


A component that has events. Extends Component and composes with EventEmitter, inerithing both's method sets.

on, off, emit, destroy


A collection of contextless utility functions



Collection of math functions

lerp, map, cap, distance, round


Manages a dinamically grown pool of DOM Elements import PoolSystem from '@okiba/pool-system'

constructor, ensure, get, free, destroy


Manages loading of resources trough fetch to boost caching. Transparently relies on a WebWorker if possible to load on a separate thread.



Search utilities



A store module to implement state management. It allows registering to prop updates, as well as any update trough the catch-all callback.

constructor, set, get, getState, setState, reset, subscribe, unsubscribe


Maps progress ovrer time, normalized between 0 and 1

constructor, update, reset, setProgress, setDirection, reverse


Set of useful functions to ease WebWorkers development