
## Introducing Built-In UI for Smart Contracts – Powered by Hyperweb Playground

Back in January, we shared [our journey from Cosmology to Hyperweb](/blog/01-28-2025-journey-from-cosmology-to-hyperweb) — from building the frontend tooling that powered much of the Cosmos ecosystem, to rethinking the entire developer stack from the ground up.

We built the tools that brought Cosmos to life in the browser — Telescope, Interchain Kit (formerly Cosmos Kit), staking dashboards, governance frontends, and the CLI-to-UI bridges that made Cosmos accessible to everyday developers. But we always ran into the same ceiling: the underlying developer experience was limited by choices made at the smart contract layer.

CosmWasm required devs to manually generate JSON schemas. Those schemas lived off-chain, were often incomplete, and required separate tooling to render. As much as we pushed to embed schemas into the contract artifacts (even attempting to inject them via compiler optimizations), we hit a wall. You can't change the developer experience unless you build the entire chain with dev experience in mind.

That's exactly what we did with Hyperweb.

---

## TypeScript Contracts. Native Developer Experience. Built-In UI.

Today we're rolling out the next big milestone for the Hyperweb Playground:

> **Every TypeScript smart contract deployed to Hyperweb now gets an auto-generated UI in the browser.**

This is more than just a convenience — it's a philosophy. By building our contracts in TypeScript, we bring the entire Web development stack into the world of smart contracts. That means:

* In-browser contract editing
* Native type analysis
* Schema generation directly from your source code
* Zero friction interaction with your deployed contracts

Because we analyze your contracts in the browser at build time, and because TypeScript is part of our DNA (and the browser's), we can introspect your contract methods and generate a full UI for interacting with them.

Function arguments become editable fields. Contracts become testable, explorable, and demonstrable — with no extra code or configuration required. See it for yourself:

https://youtu.be/ylFUlVeLNwE

---

## No More Off-Chain Schemas. The Chain Is the Interface.

While we built the tools for CosmWasm as well, the traditional approach in that ecosystem required manual schema generation and disconnected tooling. Contracts were often opaque until you read the docs or manually queried them.

On Hyperweb, every contract is self-describing. Every function is typed. Every deployment is immediately usable. This is the beauty of designing a Layer 1 that puts the developer first — where the runtime, compiler, and dev tools all speak the same language.

We didn't just bolt on TypeScript. We built Hyperweb to be *natively TypeScript* from the ground up. That means we can do things no other blockchain can.

---

## The First Step Toward a Promise Fulfilled

In my [Cosmoverse 2024 talk](https://www.youtube.com/watch?v=a_G2_KXRf1Y&list=PL_XyHnlG9MMvekTCbbJArAOwVlkCY54V5&index=3), I promised "Every contract gets a UI" — well — here we are.

This first version is focused on arguments: we auto-generate a UI so you can call your contract functions from the Playground without writing any extra frontend code. But this is just the beginning.

Soon we'll be releasing these dynamic UI primitives as first-class npm modules, so you can use them in your own projects outside of the Playground.

We're building toward a future where the UI and the contract are two sides of the same coin — where your app's logic *is* your interface.

---

## Try It Now

Head to [https://hyperweb.io/playground](https://hyperweb.io/playground), write a contract, deploy it, and start interacting — right in the browser. 

Let's make building on-chain as easy as building on the web.

Hyperweb Playground now auto-generates a UI for every TypeScript smart contract. By analyzing contract types directly in the browser, developers can deploy and interact with contracts instantly—no frontend code required. This is a major step toward making blockchain development as seamless as modern web development.

Every Contract Gets a UI: Dynamic Interfaces in Hyperweb Playground