🦍 Gorilla UI

Gorilla UI is a lightweight, expressive UI framework for the modern web. It lets you build interfaces with just JavaScript and JSX — no build tools or virtual DOMs required. It’s reactive, declarative, and directly manipulates real DOM elements.

What Is a UI Framework?

A UI framework helps developers build interactive, stateful web interfaces more easily. Instead of manually updating the DOM when data changes, a framework handles these updates automatically. This lets you focus on how your app should look and behave — not how to wire everything together by hand.

Gorilla UI provides:

A JSX-based syntax for composing UI
Built-in reactivity with Make(...) proxies
Automatic DOM updates when data changes
A custom style language with shorthands and responsive features
Descriptive tag names and direct DOM integration (no virtual DOM)

Why Gorilla UI?

Unlike many UI frameworks that use a virtual DOM or runtime diffing engine, Gorilla UI works directly with real DOM elements. It’s designed for simplicity and performance:

No React, Vue, or build step required
Make() creates reactive state objects
JSX tags are turned into actual DOM nodes
Descriptive, semantic element names are encouraged (use _ to separate words)
Custom s style prop supports inline shorthands, dynamic expressions, animations, media queries, and pseudo styles

Gorilla UI overrides window.React.createElement at the global level — it’s not compatible with React or other JSX-based libraries that expect a virtual DOM.

Core Features

✅ 1. Reactive State with `Make`

Gorilla UI uses Make to create observable data:

const state = Make({ count: 0 });

You can bind any part of the UI to this state using an arrow function:

<counter>{() => state.count}</counter>

When state.count changes, the UI updates automatically.

✅ 2. JSX + Real DOM

JSX is fully supported — but instead of mapping to React components, tags are turned into real DOM elements. Custom tag names are allowed:

<my_component>Hi!</my_component>

Multi-word names use underscores (_) and are created as-is in the DOM.

✅ 3. Style with the `s` Prop

The s prop is a mini style language that supports:

Abbreviated CSS properties (e.g. fc → color)
Shorthands (e.g. flex, row, col)
Media queries (s__400px)
Hover/focus styles (_s, __s)
Dynamic styles (s_fc={() => state.active ? "red" : "gray"})

Example:

<button s="flex a:center bg:salmon fc:white r:.25em">Click Me</button>

More on styling later on in the document!

✅ 4. Auto-Binding Events and Attributes

Any standard DOM attribute or event works:

<input
  placeholder="Enter text"
  value={() => state.text}
  oninput={(e) => (state.text = e.target.value)}
/>

Functions passed to attributes will re-run reactively.

✅ 5. Built-in Animation Support

Gorilla UI also supports animated styles and transitions using the a, _a, and __a props.

✅ 6. No Build Step

Just include your script and JSX runtime (via Babel or your preferred JSX setup). Gorilla UI runs directly in the browser.

Next Steps

Ready to build? Let’s start with two interactive examples:

A simple counter
A reactive todo list

Tutorial: Building a Counter with Gorilla UI

Let’s walk through how to build a simple reactive counter using Gorilla UI.

Step 0: Installation

To install Gorilla UI use npm or your preferred package manager:

npm install gorilla-ui

Then simply import it into whatever file you're using

import "gorilla-ui"

Note that Gorilla UI adds several fields and variables to the global window, this is part of it's design philosophy around ease of use and allows for a native like feel.

Step 1: Create Reactive State with `Make`

Gorilla UI uses a function called Make to create reactive state objects. You can think of it like useState, but simpler and more powerful.

Start by initializing the counter state:

const _ = Make({ count: 0 });

Here, _ is just a convention — it's a plain JavaScript object, but wrapped in a proxy so that any changes to _.count automatically update the UI.

Step 2: Define the Counter Component

Gorilla UI components are plain functions that return JSX. You can use any tag names you like — even custom ones like <counter> or <display>.

const Counter = () => {
  const _ = Make({ count: 0 });

  return (
    <counter s="flex a:center">
      <display s="mr:.25em">{() => _.count}</display>
      <button s="bg:salmon r:.25em fc:white" onclick={() => _.count++}>
        +1
      </button>
    </counter>
  );
};

Let’s break this down:

<counter> and <display> are valid tag names — Gorilla UI creates them as real DOM nodes.
{() => _.count} is a reactive expression — the display element will update any time _.count changes.
The button increments the count on click.
Styles are added using the s prop. For example, s="bg:salmon r:.25em fc:white" sets the background, border radius, and font color (see style section for full documentation on available shorthands).

Step 3: Render the Component

To show the counter on the page, append it directly to the DOM:

document.body.append(<Counter />);

That’s it! No virtual DOM. No render loop. Just plain DOM + reactive state.

Full Example

const Counter = () => {
  const _ = Make({ count: 0 });

  return (
    <counter s="flex a:center">
      <display s="mr:.25em">{() => _.count}</display>
      <button s="bg:salmon r:.25em fc:white" onclick={() => _.count++}>
        +1
      </button>
    </counter>
  );
};

document.body.append(<Counter />);

What Happens Under the Hood

When the component renders, Gorilla UI creates real DOM elements (<counter>, <display>, <button>)
It assigns the reactive function {() => _.count} to the text content of <display>. This function is tracked and rerun automatically whenever _.count changes.
When the button is clicked, _.count++ triggers the reactive system.
Gorilla UI re-evaluates the function bound to <display> and updates the DOM.

Summary

In just a few lines of code, you built a fully reactive UI with:

Descriptive JSX tags
Automatic state tracking
Dynamic styling
No external libraries or virtual DOM

Next up, try building a dynamic list with user input and checkboxes using the same techniques — just like a Todo app.

Tutorial: Building a Todo List with Gorilla UI

In this tutorial, we’ll build a fully reactive Todo List using Gorilla UI. You’ll learn how to:

Create a reactive list of items
Handle user input
Reactively update styles and checkboxes
Render dynamic components from an array

Let’s get started.

Step 1: Set Up the Component Structure

Start by creating a function called TodoList. This will be your component.

const TodoList = () => {
  // We'll add our state and UI inside here
};

Step 2: Create a Reactive Array of Todos

Inside the component, we’ll define an array of todos using Make(...). Each item is also a reactive object.

const todos = Make([
  Make({ title: "Walk dog", isComplete: false }),
  Make({ title: "Take out trash", isComplete: true }),
  Make({ title: "Do dishes", isComplete: false }),
]);

Explanation:

Make([...]) wraps the array so it becomes reactive.
Each Make({ ... }) wraps a todo item in a reactive object.
If we change todo.isComplete, the UI will automatically update anywhere that uses that value.

Step 3: Add a Styled Container

Now let’s return some JSX from the component. We’ll start with a root container that has a vertical layout and padding.

return (
  <todo_list s="flex col p:1em b:(.25em solid black) r:1em">
    {/* UI will go here */}
  </todo_list>
);

Here, s="..." applies styling using Gorilla UI’s style language:

flex col: flexbox layout in column direction
p:1em: padding
b:(...): a full border definition
r:1em: border-radius

Step 4: Add an Input Field for New Todos

Next, let’s add an input box that lets users type in new tasks and press Enter to add them.

<input
  placeholder="Enter new todo"
  onkeydown={(e) => {
    if (e.key === "Enter") {
      todos.push(Make({ title: e.target.value, isComplete: false }));
      e.target.value = "";
    }
  }}
  s="r:.25em ol:none bg:salmon fc:white"
/>

Explanation:

When the user presses Enter, it creates a new reactive todo and pushes it into the todos array.
The input field is then cleared.
Styles:
- r:.25em: rounded corners
- ol:none: removes outline
- bg:salmon: background color
- fc:white: font color

Step 5: Render the Todo Items

Below the input, we’ll render a list of todos. Use the special <list> component, which takes the reactive array via _={todos} and maps it to individual items.

<list _={todos}>{(todo) => <todo>{todo.title}</todo>}</list>

This works like a reactive map() — when todos changes (like when we add an item), the list updates automatically. Note that <list></list> is a special reserved tag for doing exactly this.

Step 6: Add Checkbox and Completion State

We want users to mark items as complete. Let’s enhance the inner part of the list like this:

<todo>
  <input
    type="checkbox"
    checked={() => todo.isComplete}
    onclick={() => (todo.isComplete = !todo.isComplete)}
  />
  {todo.title} - {() => (todo.isComplete ? "complete" : "incomplete")}
</todo>

Explanation:

checked={() => todo.isComplete}: reactive binding to checkbox state
onclick: toggles isComplete
We display whether the task is "complete" or "incomplete" reactively

Step 7: Add Dynamic Styling

Let’s make the text turn green when a task is complete and red otherwise.

<todo s_fc={() => (todo.isComplete ? "green" : "red")}>

s_fc={...} sets the font color dynamically based on the todo’s state.
You can replace fc with any other style abbreviation.

Step 8: Final Component

Here’s the complete version now that we’ve built it step-by-step:

const TodoList = () => {
  const todos = Make([
    Make({ title: "Walk dog", isComplete: false }),
    Make({ title: "Take out trash", isComplete: true }),
    Make({ title: "Do dishes", isComplete: false }),
  ]);

  return (
    <todo_list s="flex col p:1em b:(.25em solid black) r:1em">
      <input
        placeholder="Enter new todo"
        onkeydown={(e) => {
          if (e.key === "Enter") {
            todos.push(Make({ title: e.target.value, isComplete: false }));
            e.target.value = "";
          }
        }}
        s="r:.25em ol:none bg:salmon fc:white"
      />
      <list _={todos}>
        {(todo) => (
          <todo s_fc={() => (todo.isComplete ? "green" : "red")}>
            <input
              type="checkbox"
              checked={() => todo.isComplete}
              onclick={() => (todo.isComplete = !todo.isComplete)}
            />
            {todo.title} - {() => (todo.isComplete ? "complete" : "incomplete")}
          </todo>
        )}
      </list>
    </todo_list>
  );
};

document.body.append(<TodoList />);

Summary

You’ve now built a reactive Todo List using:

Reactive arrays and objects with Make
Dynamic list rendering with <list>
Reactive DOM updates using functions
Conditional styling with s_fc
Event handlers for user input

You wrote zero render() functions and no boilerplate — just clean, declarative UI.

Style System Reference

Gorilla UI includes a built-in style DSL (Domain-Specific Language) that simplifies styling using the s prop and related attributes. This system supports:

Abbreviations for common CSS properties
Shorthand keywords (like flex, row, bold)
Dynamic values via functions
Pseudo styles (_s, __s)
Media queries (s__mobile)
Animations (a, _a, __a)

Below is the complete reference for all abbreviations and shorthands supported in Gorilla UI.

Abbreviations

These map short keys to full CSS properties. You can use them in any s, s_fc, etc. style expression.

Abbreviation	Property
w	width
minw	min-width
maxw	max-width
h	height
minh	min-height
maxh	max-height
m	margin
ml	margin-left
mt	margin-top
mr	margin-right
mb	margin-bottom
p	padding
pl	padding-left
pt	padding-top
pr	padding-right
pb	padding-bottom
d	display
b	border
bc	border-color
bw	border-width
bs	border-style
bl	border-left
blc	border-left-color
blw	border-left-width
bls	border-left-style
bt	border-top
btc	border-top-color
btw	border-top-width
bts	border-top-style
br	border-right
brc	border-right-color
brw	border-right-width
brs	border-right-style
bb	border-bottom
bbc	border-bottom-color
bbw	border-bottom-width
bbs	border-bottom-style
r	border-radius
rtl	border-top-left-radius
rtr	border-top-right-radius
rbr	border-bottom-right-radius
rbl	border-bottom-left-radius
over	overflow
overx	overflow-x
overy	overflow-y
o	opacity
ol	outline
sh	box-shadow
c	cursor
ct	content
fc	color (font color)
fs	font-size
ff	font-family
fw	font-weight
fd	font-direction
fsp	font-spacing
fst	font-style
td	text-decoration
ta	text-align
tdc	text-decoration-color
left	left
top	top
right	right
bottom	bottom
a	align-items
ac	align-content
j	justify-content
as	align-self
fl	flex
flg	flex-grow
fls	flex-shrink
z	z-index
bg	background
t	transition
tdl	transition-delay
tdr	transition-duration
tp	transition-property
ttf	transition-timing-function
sel	user-select
tf	transform
tfo	transform-origin
an	animation
andel	animation-delay
andir	animation-direction
andur	animation-duration
anfm	animation-fill-mode
anic	animation-iteration-count
ann	animation-name
anps	animation-play-state
antf	animation-timing-function
v	visibility
ws	white-space
wb	word-break
ww	word-wrap
ow	overflow-wrap
hy	hyphens
lh	line-height
cc	caret-color
pe	pointer-events
ts	text-shadow

Shorthands

These expand to entire sets of styles or common patterns.

Shorthand	Expands To
flex	display: flex
block	display: block
hide	display: none
inline	display: inline
inlineb	display: inline-block
absolute	position: absolute
static	position: static
relative	position: relative
sticky	position: sticky
fixed	position: fixed
wrap	flex-wrap: wrap
wrapr	flex-wrap: wrap-reverse
row	flex-direction: row
rowr	flex-direction: row-reverse
col	flex-direction: column
colr	flex-direction: column-reverse
bbox	box-sizing: border-box
italic	font-style: italic
bold	font-weight: bold
oblique	font-style: oblique
visible	visibility: visible
collapse	visibility: collapse
underline	text-decoration: underline
overline	text-decoration: overline
line-through	text-decoration: line-through
blink	text-decoration: blink

Using Abbreviations and Shorthands

You can use any combination in the s prop:

<box s="flex col bg:salmon fc:white p:1em r:.5em" />

This would expand to:

display: flex;
flex-direction: column;
background: salmon;
color: white;
padding: 1em;
border-radius: 0.5em;

And with dynamic logic:

<box s_fc={() => (isActive ? "green" : "gray")} />

Note that while it is possible to use dynamic styles via the s prop:

<box s={() => (isActive ? "fc:green" : "fc:gray")} />

This is not reccomended, instead use the s_fc prop so a new class is not created. Also note that for components rendered inside of a <list></list> dynamic classes will not work due to the way Gorilla caches styles. When in doubt, if you have dynamic styles, use a dedicated s_name prop!

Advanced Styling: Responsive and Pseudo Styles

Gorilla UI's style system doesn’t just let you write compact styles — it also supports hover, focus, and media query styles with the same ease. All styles are auto-scoped, auto-classed, and reactive when used with functions.

This section walks you through:

Pseudo selectors using _s and __s
Media queries using s__breakpoint
Dynamic variants (with functions)
Style application order and reusability

Pseudo Styles: Hover and Focus

Use the following props to apply pseudo-class styles:

_s: styles for :hover
__s: styles for :focus

Example: Hover and Focus Styles

<button s="fc:black bg:white" _s="bg:gray" __s="bg:lightblue" />

This compiles to scoped CSS like:

.button {
  color: black;
  background: white;
}
.button:hover {
  background: gray;
}
.button:focus {
  background: lightblue;
}

Media Query Styles

Media-specific styles are written using s__breakpoint, where breakpoint is a token like mobile, w_768px, or any valid media suffix.

Example: Media Styles

<card s="fc:black" s__maxw_600px="fc:blue" />

This will generate:

.card {
  color: black;
}
@media (max-width: 600px) {
  .card {
    color: blue;
  }
}

Combining Styles

You can use all forms together:

<box
  s="fc:black"
  _s="fc:gray"
  __s="fc:blue"
  s__w_800px="fc:purple"
  s_fc={() => (state.complete ? "green" : "red")}
/>

This combines:

Base style
Hover/focus style
Media query override
Dynamic reactivity with s_fc

All of these are:

Automatically classed and scoped
Reused via cache if the styles match
Applied in correct CSS order (base → media → pseudo → reactive)

Style Reuse and Efficiency

Gorilla UI automatically caches styles by their content and usage context. This means:

Identical style strings or functions produce the same class name
DOM is not mutated if styles haven’t changed
You can confidently reuse expressions without performance worry

🛠 Using the Style Split Keys (`s_bg_fc_r`, etc.)

You can target multiple style properties with one key:

<box s_bg_fc_r="salmon" />

This sets:

background: salmon;
color: salmon;
border-radius: salmon;

Or even:

<box s_w_h_minw="10px" />

This sets:

width: 10px;
height: 10px;
min-width: 10px;

Dynamic Pseudo and Media Styles

You can also use functions inside _s, __s, or s__breakpoint:

<box _s_fc={() => (state.active ? "green" : "gray")} />

These update automatically when their dependencies change.

Advanced Styling: Animations and Transitions

Gorilla UI includes built-in support for declarative animations and transitions using a clean, shorthand-based syntax. These animations are defined directly in JSX and scoped to each element automatically.

You can apply animations using:

a: base animation
_a: hover animation
__a: focus animation
a__media: media query-specific animation

Animations are dynamically generated using unique CSS classes and injected into a global stylesheet.

Animation Syntax

The animation string defines a timeline of style changes. There are three supported formats:

1. To-only animation

a="1s ease-in |to| w:100px bg:salmon"

Applies a transition from current state to the specified values over 1 second.

2. From-to animation

a="0.5s linear |from| w:0px bg:gray |to| w:200px bg:black"

Starts with specific styles and transitions to new values. You can use from and to sections together.

3. Percent-based keyframes

a="1s ease-in-out |0%| o:0 |50%| o:1 |100%| o:0"

Manually define keyframes at given percentages (just like CSS @keyframes). Useful for blinking, pulsing, or complex animations.

Examples

Animate width and background:

<box a="1s |to| w:100px bg:salmon" />

Animate from gray to black:

<panel a="0.5s ease-out |from| bg:gray |to| bg:black" />

Fade in and out:

<fade a="2s linear |0%| o:0 |50%| o:1 |100%| o:0" />

Multiple Animations

You can pass an array of animations:

<box a={["0.3s |to| r:1em", () => "0.5s |to| bg:red"]} />

Each animation string is treated independently, and class names are combined.

Pseudo Animations

Apply animations on :hover and :focus:

<button _a="0.3s |to| bg:gray" />
<input __a="0.3s |to| r:.5em" />

Media Query Animations

Apply animations based on screen size:

<box a__w_600px="1s |to| w:100px" />

Use custom breakpoints or standard media tokens (like a__mobile).

Reactive Animations

Animations can use dynamic functions too:

<box
  a={() =>
    state.active ? "0.4s |to| bg:green w:200px" : "0.4s |to| bg:gray w:100px"
  }
/>

When state.active changes, the animation re-evaluates and applies automatically.

You can combine from and to, or define full keyframe sequences using 0%, 50%, 100%, etc.

Example: Full Usage

<box
  a="
  1.5s ease-in-out 
  |from| w:0px o:0 
  |50%| w:100px o:1 
  |to| w:200px o:0.5
"
/>

This builds a 3-phase animation:

Starts at width: 0px, opacity: 0
Midpoint: width: 100px, opacity: 1
Ends at width: 200px, opacity: 0.5

How It Works Internally

Gorilla UI parses the string into structured keyframes
A unique @keyframes rule is generated and injected into the document
A CSS class is created and assigned to the element
Reused animations share the same class and rule
Functions are tracked reactively and update the class when needed

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
index.js		index.js
index.test.js		index.test.js
index.test.jsx		index.test.jsx
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

🦍 Gorilla UI

What Is a UI Framework?

Why Gorilla UI?

Core Features

✅ 1. Reactive State with Make

✅ 2. JSX + Real DOM

✅ 3. Style with the s Prop

✅ 4. Auto-Binding Events and Attributes

✅ 5. Built-in Animation Support

✅ 6. No Build Step

Next Steps

Tutorial: Building a Counter with Gorilla UI

Step 0: Installation

Step 1: Create Reactive State with Make

Step 2: Define the Counter Component

Step 3: Render the Component

Full Example

What Happens Under the Hood

Summary

Tutorial: Building a Todo List with Gorilla UI

Step 1: Set Up the Component Structure

Step 2: Create a Reactive Array of Todos

Step 3: Add a Styled Container

Step 4: Add an Input Field for New Todos

Step 5: Render the Todo Items

Step 6: Add Checkbox and Completion State

Step 7: Add Dynamic Styling

Step 8: Final Component

Summary

Style System Reference

Abbreviations

Shorthands

Using Abbreviations and Shorthands

Advanced Styling: Responsive and Pseudo Styles

Pseudo Styles: Hover and Focus

Example: Hover and Focus Styles

Media Query Styles

Example: Media Styles

Combining Styles

Style Reuse and Efficiency

🛠 Using the Style Split Keys (s_bg_fc_r, etc.)

Dynamic Pseudo and Media Styles

Advanced Styling: Animations and Transitions

Animation Syntax

1. To-only animation

2. From-to animation

3. Percent-based keyframes

Examples

Animate width and background:

Animate from gray to black:

Fade in and out:

Multiple Animations

Pseudo Animations

Media Query Animations

Reactive Animations

Example: Full Usage

How It Works Internally

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

✅ 1. Reactive State with `Make`

✅ 3. Style with the `s` Prop

Step 1: Create Reactive State with `Make`

🛠 Using the Style Split Keys (`s_bg_fc_r`, etc.)

Packages