DEV Community

Matt Levy for Ficus

Posted on • Updated on


Introducing FicusJS

FicusJS is a set of lightweight functions for developing applications using web components.

  • A function for creating fast, lightweight web components (1.88 KB gzipped)
  • A function for creating fast, lightweight stores for application state (1.21 KB gzipped)
  • A function for creating a fast, lightweight publish/subscribe event bus (271 B gzipped)

If you are looking for a fast, lightweight way to build web applications using native browser APIs, FicusJS might be what you are looking for!

Browsers have improved a lot over the past years. It's now possible to do web development without requiring any build tools, using the native module loader of the browser. We think this is a great fit for FicusJS, and we recommend this as a general starting point.

Aligns with standards

FicusJS aligns with standard browser APIs which means it is not based on any proprietary code or libraries.

As it is based on standards, it has longevity and is a good choice for enterprise web applications.


  • Functional programming patterns
  • Declarative component creator
  • Reactive components
  • Choose your own renderer
  • Extend components using functions
  • Application state management with stores
  • Application event bus
  • Small footprint
    • All features - 3.54 KB gzipped
    • Components - 1.88 KB gzipped
    • Stores - 1.21 KB gzipped
    • Event bus - 271 B gzipped
  • Features can be loaded independently or use the all features bundle
  • No dependencies
  • Works with all server-side and client-side frameworks


The full documentation is available at

Getting started

To get started, you can use the FicusJS starter kit at

FicusJS router

Looking for a lightweight standalone client-side router that supports history and hash routing plus web components?

Try FicusJS router!

FicusJS script loader

Looking for a lightweight script loader for lazy loading ES modules and ES5 scripts or both based on dynamic paths?

Try FicusJS script loader!

Top comments (2)

igetpaidtocode profile image
Alex Dev

FICUSJS Rocks! I was able to make a simple no build reactive app for my html page thanks!

cekvenich2 profile image
cekvenich2 • Edited

It is wonderful!

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!