gui/apps/gui.hanzo.ai/data/blog/introducing-hanzogui.mdx

---
title: Introducing Gui
publishedAt: '2021-09-22'
description: A better base layer for building cross-platform apps
by: nate
# relatedIds:
#   - 'hanzogui-alpha'
---

<Notice>Gui is in alpha - we'd love it if you tried it out and gave us feedback</Notice>

Gui takes the next steps towards truly universal styling for React apps.

It was born to allow **sharing more code between native and web components** —
with all the
[modern styling features we've grown love](/docs/intro/introduction).

<Image
  title="Layout tools image"
  src="/blog/introducing-hanzogui/hero.png"
  size="hero"
  height={200}
/>

Until today, sharing code between native and web has had some big downsides —
especially inline styling, responsive styling and themes. All of the above
require time and memory-hungry operations in JavaScript. On the web, especially,
this runs a lot of JS on the same thread as your layout, causing issues with
jank and limitations rendering deeper trees.

**Gui introduces an optimizing compiler, enabling:**

### Inline styles without overhead

An optimizing compiler extracts most styles you write, for
[**2-8x speed improvements**](/docs/intro/benchmarks) vs other cross-platform UI
kits. Even if they're inside conditional ternaries or spread objects, it
extracts styles out of your JS bundle and into atomic CSS.

### Fast responsive styles

**Hooks and inline responsive styles also optimize away**. Again, even with
ternaries or other logical operations interspersed, you get clean CSS media
queries as your output.

### Universal, fast themes

A powerful theme system that outputs CSS variables on the web, clearing your
tree of many large objects.

---

## What is Gui

Gui is three things:

### Core: Create your Design System

[@hanzogui/core](/docs/core/styled) provides fast primitives for inline styles
_as well as_ hooks - even for media queries and themes - that work the same on
native as they do web.

### Gui: Universal UI Kit

[hanzogui](/ui/stacks) is a batteries-included UI Kit that builds on core with
easy-to-use universal components.

### Static: Optimizing compiler

`@hanzogui/static` works with both of the above (with webpack and babel). It
outputs faster code, flattens your trees, and tunes your styles perfectly to
each platform.

---

## What makes it alpha

We've just finished upgrading many pieces of Gui, so some of the newer
features are still settling. On native, we need to iron out a few of those
features a bit more.

---

## History

We're building Gui hand-in-hand with an app that needs a great UX on web and
native. As a small team, being able to share as much code as possible between
the platforms has many upsides.

Gui began as a fork of [JSXStyle](https://github.com/jsxstyle/jsxstyle),
rebuilt to support
[React Native Web](https://necolas.github.io/react-native-web/). We added basic
support for [useMedia](/docs/core/useMedia) first, which let us share responsive
components between web and native. Eventually, [useTheme](/docs/core/useMedia)
was added when we added a dark mode.

With enough development, we decided it was worth sharing it with the world.

There was only one problem: design systems have gotten _really good_ in the last
few years with syntax, themes, variants, tokens, and shorthands. We'd built UI
kits with these features before, but since JSXStyle hadn't supported them,
Gui didn't either.

So, over the last months I set out to modernize Gui, and I'm happy to say
that as of today it's ready for wider release.

A big thanks is owed to the creators of both JSXStyle (for the initial compiler)
and [Stitches](https://stitches.dev) (for theme inspiration, and the bones of
this website).

---

## Going forward

Gui is an ambitious project and still early in its life, but we've been
using it for a couple years now and feel its ready to get out into the world.

We look forward to working with the community and helping it grow.