Today I'm releasing Hyper: a simple markup language for building user interfaces. It enables developers (and AI models) to generate complex UIs with amazingly clean syntax.

Kevin

FaunaDB

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Hyper is a new markup language designed to simplify UI development, offering a cleaner syntax than conventional methods like React. It aims to minimize complexity and bloated code by focusing solely on rendering, separate from styling concerns. Hyper is presented as a more efficient alternative to React, requiring less boilerplate and enabling fully reusable components across various projects and contexts. It stands out for its lightweight size and streamlined approach, which facilitates scalability and ease of use for developers and AI models.

Hyper: Simple React alternative

is it me or should this be compared to Svelte instead of react?

There are so many front frameworks. I always stick to React because it has a huge ecosystem around it

Here we go. Yet another framework that thinks arbitrary syntax around HTML tags and specialized tokens in strings (that are probably not syntax highlighted) used to specify special behaviors.
When will people learn that NO ONE wants to do “as foo from bar in baz” in an HTML string of some random attribute? If that was the way the entire Internet wanted to go, Angular would be the #1 UI framework and not React.
ANYTIME you have to do something like <code>&lt;div [attr]=&quot;&lt;special&gt; &lt;syntax&gt;&quot;&gt;...&lt;/div&gt;</code>, you automatically make the cognitive load of having to remember some framework-specific keywords higher and thus increase the overhead and complexity.
Lastly, about the “modern React” example, I could accomplish the SAME THING that this <code>Hyper</code> thing is doing with WAY less code than the example shows. The example shows a highly opinionated approach of breaking things into separate imported components. You could do this with a namespaced approach that would make this equal to Hyper (but better).
It is important to remember that if you judge an entire framework based on what someone does with it, then you aren’t judging the framework, you are judging someone else’s answer to a problem, not the framework itself. So, using ShadCN is not a fair example when there are SO MANY ways to accomplish what the author claims Hyper is supposedly adding. Just saying.
For example:
<pre><code class="language-typescriptreact">// This could be an implementation over ShadCN
// or it could be a custom implementation. Either
// way, it could be simplified.
import { Table } from &quot;@/components/ui/table&quot;;

// .d.ts files for components is VERY wrong use.
type Props = { user: ... };

// If you understand TypeScript well you would
// would realize that you don't need to always
// import React and could make FC a global type
// so you NEVER have to do this boilerplate. But
// that is just the obvious.
export const UserTable: FC&lt;Props&gt; = ({ user }) =&gt; (
 &lt;Table&gt;
 &lt;Table.Header&gt;
 &lt;Table.Row&gt;
 &lt;Table.Head&gt;Name&lt;/Table.Head&gt;
 &lt;Table.Head&gt;Email&lt;/Table.Head&gt;
 &lt;Table.Head&gt;Age&lt;/Table.Head&gt;
 &lt;/TableRow&gt;
 &lt;/Table.Header&gt;
 &lt;Table.Body&gt;
 {users.map((user, index) =&gt; (
 &lt;Table.Row key={index}&gt;
 &lt;Table.Cell&gt;{user.name}&lt;/Table.Cell&gt;
 &lt;Table.Cell&gt;{user.email}&lt;/Table.Cell&gt;
 &lt;Table.Cell&gt;{user.age}&lt;/Table.Cell&gt;
 &lt;/Table.Row&gt;
 ))}
 &lt;/Table.Body&gt;
 &lt;/Table&gt;
)
</code></pre>
I REALLY don’t like the disingenuous approach to trying to act like React is harder than it is. React is probably the most simplistic and flexible UI framework that has ever been created. Which is WHY it is #1 and Hyper will never be.
If the author is going to be disingenuous then I have no reason to believe Hyper is all that great.
This is a solution in search of a problem, but not really solving anything.

This is a milestone for me i have been coding for 5 months and this is the second js framework that has made since I have started, if this continues I can assume we will have 20 new javascript frameworks by 2030