The logic behind it
  • Minimalism - no dependencies, efficient code
  • Modularity - users are in control, billions of possible patterns
  • Accessible - not fully yet
  • Sounds & 3D Layers - cinematic & immersive experience
  • Touchscreen & Convergence - works on (almost) all devices, hovering or using a cursor are not requirements for interracting with the ui, usually not fully taken into consideration by devs & frameworks. Here it is!
  • Transparency - semitransparent multilayers, support for os integration with transparent windows
  • Searchable & open on demand - to reduce physical space and help you focus
  • Private - all data stays on your device
  • Supports both the https:// and file:/// protocols - most frameworks don't do that, we do, so you can use the apps statically & offline too, without any server, compiling, nodejs etc. required.
How do I use it on my own projects?

In any way you want, as long as you keep it open source and follow the AGPL 3.0 License here. Propper documentation is coming soon

I see glitches or errors. How do I reset it?

EFY or

Or clear your browser's cache, try a different browser, device etc.

How do I repport bugs or share my ideas?

On Github or Matrix. Try to specify how you encountered the bugs, on what device, browser etc. And for ideas, why they should be implemented and what use cases they have.

Is it stable / production-ready?

EFY is currently in Beta, so expect potential bugs. Features and apps that are unstable are usually marked this way:


- unavailable now, but expected to come up
- unsafe to use, lots of bugs
- safer to use, less bugs
What the name efy stands for

Nothing. It's just a name, like Andy or Izzy.

Add a background image


More coming soon...

This is just the beginning...

Learn how to use efy
  • It sets the mode, the default value is default
  • Options: light_light , light_sepia , light_trans , dark_dark , dark_nord , dark_black , dark_trans


  • 1st part: can be light or dark to indicate the general mode
  • 2nd part: indicates the specific type of light / dark mode: light sepia trans dark nord black
  • trans = Transparent - it makes the background invisible so that you can see behind the window (if your web engine, browser or operating system supports it) or the image you choose from the sidebar menu


Specific mode:

[efy_mode=light_sepia] { your css }

All light modes:

[efy_mode*=light] { your css }

Not this specific mode:

:not([efy_mode=light_sepia]) { your css }

Remove selector if any light mode is on:

$('[efy_mode*=light] #your_selector').remove()
- create html

$add('Tag', {Attributes}, ['Text', Children], Parent, 'Position')


Only Tag is required. Other parameters are optional

Tag - html tag like: div, p, img etc

Attributes - one or multiple html attributes like: class, type, height etc

Text - text content

Children - nested html tags

Parent - parent of the tag where it should be added. If not specified it defaults to the body tag

Position - where the tag should be added in relationship to the parent:
beforebegin , afterbegin , beforeend , afterend


Add an empty button to body after all existent children


Add a css styled button inside the #test selector, before other children

$add('button', {style: 'background: red; padding: 20rem'}, 'Text', $('#test'), 'afterbegin')

Range input with some attributes before #test ends

$add('input', {
        type: 'range', value: '50', min: '0', max: '100', step: '1',
        class: 'test', id: 'test',
        style: 'margin: 0; padding: 15rem'
    }, [], $('#test')

2 nested buttons inside a div

$add('div', {}, [
    ['button', {}, '1'],
    ['button', {}, '2']
More coming soon...

This is just the beginning...


Add an <i> tag with an [efy_icon] attribute containing your icon code from bellow


<i efy_icon="star"></i>
Color Picker
Clock & Timer
Select menu




This element explains stuff