Hacker News Reader

How is internationalization, IME support, emoji, accessibility?

I just tried to insert an emoji on the demo. The page didn't recognize the IME was up and when pressed enter in the IME it inserted a carriage return in the text area. I tried pasting in some Japanese and an emoji. Neither displayed. I tried right-clicking so I could use cut/copy/paste/define/lookup/spellcorrect. All of them were missing

We've only focused on latin script so far. We'll expand over time.

You actually just found a bug in our text editing. Cut/copy/paste is supposed to work. We've always tested with hotkeys instead of right clicking. So thanks for the bug report :)

If you look at the text rendering alone, this is a massive feat. People take text rendering for granted. No sir, it is not. Even for Latin script, it is not. Let alone exotic languages such as Urdu/Persian that are highly cursive and ascend upwards depending upon the length of the word.

This seems to be built out of pure love for technology but I am wondering how much time and effort has gone into that.

Text and css are both endless pits of undefined behavior. But this would make a great ad builder.

Thanks! Yeah, text rendering nearly killed me. And all I did was latin script. I even punted on ligatures for now. I'm insanely impressed by the people who made full text support.

And maybe it sounds silly, but we don't personally feel pure love for technology. We're obsessed with a vision. And we've decided to conquer any technical challenge to make it real.

> but I am wondering how much time and effort has gone into that

For me, it was the best part of 4 months of mornings, evenings and weekends - and roughly 40% of my sanity (quaternions took the other 60% a few years ago). And the work is nowhere near finished. Knowing that I still need to find a proper fix for CJK punctuation brings me out in hives. I've also developed a special hatred of Thai fonts.

As for styling a single Arabic glyph within a word ... has anyone in the world managed to do that? It's when I failed to achieve that idea I decided to throw in the towel and release the work as Good Enough because I've Had Enough!

Still - it was an adventure[1].

[1] - https://scrawl-v8.rikweb.org.uk/demo/canvas-206.html

For a very similar use case I've developed custom text rendering in browser with support for CJK, Thai, Arabic (including bidirectional text with Arabic text within Latin or vice versa) and bitmap emojis.

Tbh all the complex part is handled by: https://github.com/harfbuzz/harfbuzzjs which handles the entire text shaping part (which glyphs to draw and the offset from previous glyph), then all that remains is text layout (linebreaking, kerning, line height, font size etc.) and the actual rendering ofc. Still took about 4 months of full-time work.

I looked at harfbuzzjs at one point when the work was making me cry. It looks very useful, but in the end I decided against using it. Partly because I'm keen to keep my library free of direct dependencies. But also because I know both Chromium and Firefox use Harfbuzz internally (I wonder what Safari uses instead?) and it annoys me that even with access to that tool, browsers still manage to make a mess of the Canvas Text Metrics interface[1].

People who develop canvas libraries soon learn that they don't get to play with Nice Things like consistency across browser implementations for the standards they've (allegedly) agreed to respect.

[1] - https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics

Massive respect for the craft. Knowing the details of the text rendering myself, goosebumps. :)

> Let alone exotic languages such as Urdu/Persian that are highly cursive and ascend upwards depending upon the length of the word

I've never heard about this. Where can I read more about it?

This has been linked in the comments already, but check this out: https://faultlore.com/blah/text-hates-you/

That's an interesting read, but I didn't find anything relating to

> ascend upwards depending upon the length of the word

Did I just miss it?

You can check the Pango's script gallery (GNOME project) [0] as showcase of their prowess to be able to render Persian/Urdu that is the most complex form of Arabic script.

Complexity comes from the fact that in Arabic, a single character can have at max 4 contextual shapes generally speaking. In Nastaleeq variation, a single character can have up 100s of contextual shapes depending upon where it appears in the word.

[0]. https://pango.gnome.org/ScriptGallery

This looks cool. Here's my feature request list (can't tell if these are there yet):

- import existing html/css. This would allow me to use it for non-greenfield projects, and allow for back-and-forth workflows.

- mark nodes with my own semantic ids that are included in the html export. I would use these to post process exported html to create dynamic templates/components/views. I don't want to be tied to a specific framework.

Things that annoy me about Figma:

- No way to set defaults for new frames etc ( that I know of )

- Some things rely on mouse input (setting width modes etc) which breaks flow

- Generally not for power users

- No decent code export

- No stylesheets for retheming components /showing variation (I know there's a Variant workflow for it but it's not simple to restyle an entire hierarchy)

Would love to see you tackle those if you're not already. Great to see you following CSS more closely, makes so much sense.

But if you aren't allowing us to extract the code / self host then I'll be passing on it. Digital feudalism

Congratulations. The product looks very interesting.

Also congratulations on building a canvas engine library! Nothing is easy when it comes to canvas. Creating one for the WebGL canvas is magnitudes of more difficulty compared to 2D (which is what my library maps to).

I'd love to hear your horror stories when it came to coding up the text layout functionality and text editor - that is, in my view, the hardest part of the job: I may have invented a few new swear words while tackling that work.

I'd also be interested in your plans for accessibility. Not just making the tool accessible, but how such a tool may push designers to consider accessibility as a first class requirement for the end user in the projects they build with the tool.

Best wishes and great fortune!

Man you're right. The text layout system was brutal. I had a particularly memorable day where I couldn't figure out why our line height didn't match the browser (and each browser was different). I fixed it by adding a constant that was buried in the font files. It took 12 hours. It was a one liner.

Haven't planned accessibility help yet. But I think simple warnings could go far. When I break guidelines, it's usually by accident.

I’m betting the value you were looking was in the OS/2 table in the TrueType/OpenType files.

Every time I have to interact with font metrics data directly, I pour one out for IBM’s greatest and most tragic PC desktop OS.

I hope you know what you're in for! [0] Good luck and godspeed :D

https://faultlore.com/blah/text-hates-you

We've looked over this essay a few times and we can relate. Rendering text is not for the faint of heart :)

A "website builder" should spit out static html that you can host yourself.

Otherwise, this is another hosting service with a really nice proprietary wizard.

Even more important: with NO proprietary libraries (.js etc.) - OR - at least ones that are a) open-source and b) won't go kaboom if the company ever goes bust.

IMHO, your strategy has always been the Correct Answer™. "Web browsers" should be based on URI/URL, HTTP, a canvas, and a stock virtual machine (eg WASM).

HTML/CSS support should just be another MIME type among many. Java Applets, Flash/Shockwave, PDF, Markdown, VRML-97, Quake .map, or whatever. Most sites would use one of the many stock renderer & runtimes. Some would implement their own, like your CSS reimplementation, as needed.

In other words, just skip the need for HTML shims.

Lastly, your efforts bring us that much closer to bringing us full circle. Next step: implement Wayland (and/or X11 if you're nostalgic).

You're right, we feel trapped in the current model for serving content on the internet. We've talked internally about a browser API that would allow you to override certain CSS layout behavior. If I could extend / modify the browser's layout engine, I would gladly do so.

It’s a work in progress I thought, some of the APIs have shipped but it seems layout is behind flags in Chrome

https://ishoudinireadyyet.com/

https://github.com/w3c/css-houdini-drafts/blob/master/css-la...

Wow, this is really cool! Thanks for sharing.

I'm obviously biased because we've been in the same YC batch, but I just want to say that one thing that always impressed me about you guys is how obsessed you were with building the best product you could.

When you explained how you had just reimplemented the CSS spec I was mindblown.

You guys rock. Repaint is amazing.

> We wanted users to be able to see all their content on one screen > with many thousands of nodes on the screen

Does it really need WebGL? You could pre-render things to images (memoize your rendering basically) and update the cached images only when the editing happens. As the interactive editing usually happens only locally, it could probably work well.

The obvious upside is that you don't need then to re-invent the browser's renderer and text editing from scratch, you could re-use it.

For example, this stroke me as an extreme NIH:

> We also can’t use the browser’s built-in text editor, so we made one ourselves

People usually just hate custom non-system text inputs, because it is very hard to reproduce the native look and feel of text selection, editing and stuff, and even if you manage to get close to it, there will always be some "uncanny valley" effect...

I had the same thought regarding the renderer — the worst case scenario would be a complex design with correct code that renders incorrectly in the app. I’d sacrifice frames per second just to avoid ever being in that position.

Regarding the text editor — I can’t stand using any editor that doesn’t have the hotkeys and multi cursor editing that I’m used to. I even stopped using note apps and just use vscode anytime I need to author more than a paragraph of text.

I worry that a clever image caching strategy and the Monaco npm package would be a better alternative for many reasons — especially considering the role that easy access to Devtools plays in the design process, which you also lose with a canvas.

We agree that making the editor match the browser is super important. At some point we'll have implemented the whole CSS spec. Then, it should always match exactly.

Or at least we'll match Chrome. Sometimes browsers don't match each other.

Building a layout engine is, i think, most of the browser, in a world where we have extremely few browser engines. I'm sure you've got enough on your plate already but in your back pocket, maybe have a thought for running your renderer on standalone wgpu, throwing in V8 bindings, and becoming the next Ladybird / Servo?

We already do lots of rendering to cached images. It's not a panacea. It saves you from unnecessary recomputing. But many actions update the rendered state per-frame. Zooming is a great example. You can't cache it at every resolution.

Maybe there's a way and we didn't find it? We looked at every example we could find. There's a lot of canvas apps without WebGL. But they're all orders of magnitude behind the Figma benchmark. Everything not using WebGL felt noticeably less smooth.

And in our user testing, our texting editing is already past the valley :)

Do you have any plans to open source / license the core rendering engine. Seems very useful for rendering in other contexts like textures for animations.

We weren't planning on it. It's not very clean or transferrable. We really hacked it together. We'd have to do a ton of work to make it useful for anyone.

> You can't cache it at every resolution

True, but you don't need everything at max resolution simultaneously, so you can update your caches according to the current zoom level and thus get infinite zooming if you want.

At a large zoom level, few things get into the viewport, so it shouldn't cause troubles. My guess is that the troublesome scenario is when you zoom out (so that lots of pages can get rendered simultaneously), not when you zoom in?

I don't think of it as "needing WebGL", but as something finally utilizing it for this. Just about anything gets better if you can find a way to do it on the GPU, at least when considering hardware easily available for consumers. The sheer performance that enables is a quality of its own IMO.

> it is very hard to reproduce the native look and feel of text selection, editing and stuff, and even if you manage to get close to it, there will always be some "uncanny valley" effect...

People who want what they already have can just use what they already have.

And it's not just about matching it... you can scroll butter smooth at 240 fps. Or maybe you could make undo leave traces that fade out where something changed, making it more easy to follow when just keeping ctrl+y/z pressed for a bit -- or maybe that would make it harder, but the cool thing is that you easily try out all sorts of crazy things things when something is in shader form that would take a lot more effort to get working at 1/100th the speed any other way.

Browsers zoom in and out in 10% steps. That's incredibly crude and jarring. Like smooth scrolling, there could be smooth zooming. Or the other way, you only change zoom once the user has confirmed the new zoom level -- you can't do either in a browser. And that's such a tiny thing!

Of course how the GPU prefers things to be laid out kind of funnels what you'll end up experimenting with, but that's absolutely an avenue worth exploring, until you hit a wall, and then you climb that wall and keep going. Please :)

> Browsers zoom in and out in 10% steps

Not entirely true — on Mac I can pinch zoom this Hackernews page super smoothly (in Chrome) using trackpad.

Same on Windows if you have a "precision" trackpad.

> People who want what they already have can just use what they already have.

My point is that while people may want to pursue what you described (some advanced UI behaviors), in practice they fuck up even basic functionality, because even that is almost impossibly hard to implement with text rendering and editing.

For example, in Repaint some basic emojis don't work. And I didn't even try inputting some Arabic or Hebrew or Chinese — I am sure that doesn't work too. Hats off if they manage to do it, but at this point they have spent all their funding on a custom text editor, while they could have spent in on actual features.

I, as a customer, don't care if a product uses WebGL or is written in Rust... All I care if it works or not.

Hey Ben!

Thanks for making Repaint. It looks awesome and I agree with some of the comments here. I'd go absolutely bananas for a convenient web design tool that enabled me as a developer to provide my own transformer.

I'd love to see you make the internal document / node tree you are using into something that is presented to the user and could be parsed into any frontend framework that uses a tree to represent UI. If you created a standard for your underlying data structures and exported/imported the data format defined in the standard. Developers could build to the standard and then write parsers that parsed from and to your data format. So I could use Repaint at any point in my development process and use the transformer someone built to move my design into and out of Repaint and from and into my code.

If you were to create a standard that allowed developers to build their own transformers you would be making a different product then Figma. Since Figma has a better UI and design tool, and you aren't going to catch up. Figma also is already on their way to doing a HTML/CSS mapping, (see their semi-new developer feature)

If you emphasized the open standards approach and built your tooling around leveraging developers you'd have something much more close to a UI platform as opposed to "another website builder". De-emphasize designers, emphasize developers, be the Microsoft of UI building tools.

Our current API is design in the editor -> HTML / CSS. Exposing the internal data structure wouldn't work well. We've changed the structure multiple times in the past few months. We have plans to change it rather dramatically in the future.

Sorry to be kind of a downer, because the product looks really nice, but I was excited until I realized I couldn't export my site's HTML/CSS and host someplace of my choosing. But overall it looks very impressive.

What makes you want to host the website outside of Repaint? Is it related to website performance? We want to do things like optimize website speed and use CDNs to cache images. Is there something specific you need a hosting platform to have?

I have my own small server at home, and a VPS with Hetzner, and like to deploy my code to infra I have control of and can SSH into. Also, I may want to build something for a client and deploy it to their server/cloud, but if I use Repaint then I'm tied to your hosting and beholden to whatever limitations you decide to impose.

Just posting to say that I agree with the parent comment. All my sites have so much additional stuff that I couldn't just rely on somebody else's hosting even if your hosting is going to be fast and use use CDN to cache images. Maybe I want to host on Vecel to integrate their analytics or their other plugins, or I want to host on Github pages to link it to my repo. Or I want to move additional files in there and be able to access them via SSH.

Offering hosting is good, but if I pay for the service not being able to download as html / css feels like being held hostage. Instead, you should be up front about it (your software is a editor) and offer things like auto push of changes to GitHub so that I don't have to manually export.

Data sovereignty in case repaint isn't around one day.

If you are the only possible host you can set whatever price you want, and the users will either have to pay or lose the site (since it can't be hosted anywhere else). Also, you may go out of business

This is incredibly impressive engineering and a wonderful UI! As a dev, I would have to agree with some of the other comments here about access to generated code. I'd definitely suggest this to non-tech friends but I wouldn't see much of a use for it personally without code output.

I was curious what your plans are for code output in the future, have you considered some kind of React integration? If this tool had Storybook-style codebase integration I would 100% pay for a subscription. For example, being able to export the website design as a React project with organized components, allow me to modify the component code to customize behavior, and continue to iterate on the design and apply changes to my codebase?

I think an important thing for me would be to have the ability to continue to modify the design after exporting and be able to apply the design changes without having to lose my code changes.

Obviously just my personal preference so take that with a grain of salt, but I know with that feature this would completely replace Figma in my workflow and would definitely be worth paying for.

Congratulations on your launch!

Code export wasn't our original plan, but we've been thinking about it more and more. It seems like Repaint is only a couple steps away from a pretty sweet "design tool for real code".

You're right about the exporting though. We're not sure exactly how to synchronize a code editor & Repaint editor for two way updates.

What if the Repaint Project required me to link it to a git repo and make my repaint account have git access and my files live and read out of my git repo?

I'm confused - why can't this export as static HTML / CSS? Would make it useful for github pages. If you make it free for exported code as GPL or some super-restrictive license that only works for true free software, where nothing commercial can ever be used for what is exported, seems quite useful

I don't get it. If you can't export HTML and it can only be hosted on servers you control, why did you output HTML internally? Why not just stick to your own proprietary layout format and rendering engine?

Since almost all websites use HTML / CSS, its the output format we wanted to target. If you don't use HTML it breaks things like SEO, accessibility, etc.

Excellent! I will give it a try.

The website itself is a bit underwhelming for several reasons. For the reader who already gets the idea, the text makes sense. But try to read it as a new visitor and my guess is many of them are clueless and will probably bounce. Also add some examples, maybe a video (not the one you have linked here)

The website gives the feeling it is a Lean Startup style MVP launch, just a test if you get traction on the idea. Either fake it till you make it, or better, give the early users the comfort of (an idea that) their website will function when you pull the plug tomorrow.

We've thought about this. Site has an "early startup" vibe (because it is an early startup). It's hard to know exactly how to reach the next level. Maybe just building more content? We're definitely not just dabbling with the idea or pulling the plug.

Yes, just make the content. Inspire others how they can use your product.

How do you imagine the customer journey goes? For me I would not consider to use Figma as a starting point to design a website, and not knowing the market too well I am wondering how common is Figma for marketing websites (that seems the main target audience I assume). But nevertheless, it seems to make sense to follow your vision on this.

The first view are screenshots, but they look too real, I thought it was not working in my browser (firefox)

As someone who makes the occasional simple JS game prototypes (I don't have ideas for "actual games" but I love to dabble) my first [0] thought was how sexy this could be as a UI for a web game, without the publishing step, just using it. Might be useful for other things, too (anything that already requires WebGL for example).

[0] I lied, that was the second, the first thing I felt was a mixture of being jealous of what you got there, and being proud someone pulled it off! Kudos.

One note: For truly "responsive" text (and other measures, like padding/margins), I often use relative units of measurement. At the very least, rem/em, but more and more I'm using viewport¹ (including dynamic) and container query² units. I'm not your target market, and I know that owning the renderer makes this request more complex that it would seem, but I thought I'd point it out just in case you think it should be on your radar.

1) https://caniuse.com/viewport-units, https://drafts.csswg.org/css-values/#viewport-relative-lengt... (includes dynamic and inline/block lengths)

2) https://caniuse.com/css-container-query-units, https://www.w3.org/TR/css-contain-3/#container-lengths

This is something we are going to add for sure. Ideally, we will support any unit (em, rem, %) you can use in CSS for any property we expose like padding or font-size.

Very neat, playground was much more put together than I expected. A bit of aliasing but otherwise very clean (for some simple twiddling at least).

The default layout seems to have the classic "horizontal scrollbar because it doesn't account for a vertical scrollbar when setting the width" design flaw. Not sure if that's specific to the example or a "just how the sizing system works" thing.

When you mention the scroll bar are you talking about in the preview or the editor? There shouldn't be a horizontal scroll bar anywhere, so we should fix that. Also, what browser are you using?

Preview, the issue will go away if I force enable chrome://flags/#overlay-scrollbars. Screenshot (w/ flag set to default): https://i.imgur.com/tExERgS.png

Google Chrome 128.0.6613.120 (Official Build) (64-bit) (cohort: Stable)

Windows 11 Version 23H2 (Build 22631.4112)

Issue does not occur in Firefox on the same system since it seems to default to overlay scrollbars.

Thanks for the screenshot and info, we'll fix this!

Thanks for the no sign-up playground to poke around in!

I understand that basic functionality is for free, but I saw somewhere research showing that apps that allow one to try out without login at all (providing that the actions are made on the client side of course, i.e. not writing anything to server-side data store) attract more clients than the "must-login-before-try" approach

We added a link to a playground in the post so that you can try Repaint without creating an account.

About pricing, it's strange that neither specify access to the generated source code?

Not sure what audience you have in mind.

Looks great!

The video felt a little sped up. Not sure whether that's your natural talking cadence, or the video was 1.5x, but slightly slower would be great.

Also, at first the video focusses on the nerdy interesting things like fast pan & zoom, vs the things less-technically-inclined users would care about.

I noticed the same thing. For some reason, the video (player?) defaults to 1.2x speed. You can change it in the video controls at the bottom.

That's the default speed that Loom plays, unfortunately we can't update it.

My slack status at work is “please don’t use loom” and the emoji is the loom logo crossed out

Please add a link for reporting abuse. It's likely only be a matter of time before your service is used to host phishing sites/malware, or at least links/redirects to that kind of content hosted elsewhere. Scammers love tools like this.

As a designer with some technical skills, I feel like I’m the ideal target audience for this. I’ve gravitated towards Webflow because it strikes a great balance between design flexibility and technical capability, and I’ve tried nearly everything out there in search of a solution like yours.

I highly recommend looking at Webflow’s component system and their partially-launched Library feature for inspiration (also check out Relume).

A service like yours that offers a library of foundational sections with customization options on top would be a game-changer. Best of luck! Let me know if you need any specific user testing.

A pivot that I would be really interested in if you guys were so inclined would be open sourcing the rendering engine you've built.

There is a lot of demand for Figma's close-sourced rendering engine to build tons of different types of tech/apps on top of it (animation engines, svg editors, an adobe illustrator killer, a better drawing/path/curvature tool), that Figma is NOT doing that I'm sure people (myself included) would love to build. But I'm not going to build their rendering engine from scratch—there's a ton of work that went into that and it's why Figma's moat is so big. The OS alternatives are garbage (konva,canvasjs,fabricjs). Paperjs is great but their use case is different.

No offense, I personally think that could be a bigger business than your site generator. Please reach out to me if you guys plan to do so!

Btw, if you guys decide to continue going the site-builder direction—being able to export the HTML is an absolute must.. Let users pay extra for a one-time export, if you must. It's a nightmare trying to get sign off on using something like this if it's a complete walled-garden.

This is spot on, but I doubt the engine itself is that hard to build and that the moat is that big.

It's just an html canvas powered by a low level language through WASM, plus a bridge interface. Perfect use case for Rust.

Rest of Figma is, I guess, just React.

But just as you mentioned I believe there's a lot of business potential there, and someone will get it done sooner or later.

We've gotten a lot of respect for Figma while making Repaint. Building a performant rendering engine is complicated, and that's only one part of it. You have to handle large documents, multiplayer, layouts, the list goes on. The technical weight of Figma is huge.

I think it may be harder than you're leading on. Figma has put an awful lot of work into it's vector rendering system. They have state of the art compositing, strokes, fills, shadows, and importantly boolean operations on vectors that basically no other library has done correctly. When building a vector rendering tool you have to worry about all of these 2d path problems like fill rules, corner radiis, and path direction that are very complicated to work out. Figma also has best in class shape builders, and this proprietary drawing solution called vector networks which is, eh, kind of cool.

But they've done all of this work to get this far and have basically abandoned their pen tool before it was able to be used as an actual tool for drawing. It has all of the underlying technical aspects worked out but it is a UI nightmare to use—it's painfully user unfriendly and doesn't have a curvature tool, an easy way to edit/delete nodes, etc. It has such great potential, and is so close, but Figma has chosen to go another direction.

Anyways, the only rendering engine that I am aware of that rivals Figma's is Google's Skia (which in turn is the renderer for Canvas itself in most browsers I believe) but it's 20+ years old & painfully low level.

You could theoretically do whatever you want on Skia and port it to wasm to get it into the browser, but it doesn't itself have any tools that you'd want for drawing, or creating anything that looks anything like CSS/HTML.

Literally the second someone releases something high level enough in this area I am going to build an animation library on top of it. I've had the desire to build a library that could programmatically create and edit vectors for a decade now, but there's still nothing easy enough to work with to incentivize me.

Skia is available for JS/WASM called “CanvasKit”, see https://skia.org/docs/user/modules/canvaskit/

It has text shaping & editing (might have helped OP) and can play back Lottie animations

It is developed by Google in part for Flutter, which uses CanvasKit by default when you compile Flutter apps for web.

https://docs.flutter.dev/platform-integration/web/renderers

This is cool, but still looks painfully low level. A library one level above this would be the sweet spot that would allow people to build killer stuff on top of. (Sort of like what OPs are doing)

Oh I agree. I guess I was just trying to say someone already put in the leg work and supports Skia for WASM, that’s all. I guess my dream pathway would be to combine Tldraw’s high level canvas editor API with Skia/WebGL backend; their current backend uses canvas a bit but is mostly SVG and HTML.

We actually looked into Tldraw. I read a lot of the source code and their editor is impressive. We ran into performance problems at around 1000 nodes when panning and zooming. After seeing that, we decided to make the jump to WebGL.

This is very impressive!

The rendered pages have noticeable aliasing when zooming out in the playground. Is there a reason why the WebGL context isn't configured with anti-aliasing enabled?

Yeah, I really want to improve the AA. The built-in AA only supports 4 samples. In testing, it didn't seem to do much. My research suggested most apps like this handle it at the shader level, and we just haven't gotten to perfecting them all.

Yes, WebGL's built in antialiasing is MSAA, not supersampling. MSAA only affects the edges of triangles. It doesn't help aliasing introduced by shaders at all.

Supersampling is easy to implement, just set the canvas size to a multiple of the viewport size and scale it down with CSS. It will help with all forms of aliasing, however it gets very slow very quickly. Shader aliasing is better solved analytically whenever possible.

One trick that you can use when aliasing is difficult to solve is to use supersampling but only when the scene is static. Google Maps WebGL does this. While you are dragging the map it is aliased. As soon as you stop dragging and the map becomes stationary, it renders 16 frames with subpixel offsets and blends them together to produce one supersampled frame (this is better than resizing the canvas because it can be interrupted in the middle if the user starts dragging again). This doesn't work for dynamic games but it might be suitable for your application with a lot of static content.

Whoa, that's brilliant. I think that just works for out app. Is there a public reference I could look at?

Try searching for accumulation buffer antialiasing. OpenGL ES (WebGL) doesn't directly support an "accumulation buffer" the way desktop OpenGL does, but you can emulate it with render to texture and appropriate blending settings.

Now that I think about it, it may not work as well for your app as Google Maps. The thing about Google Maps is that when you zoom or pan the map the whole screen moves. In your app when you drag something, everything else remains static. The static items on screen will flicker between aliased and smooth whenever you drag something else. That will be distracting.

Congrats on launch, fantastic work! The smooth experience is impressive. I launched an online video editor, Chillin - https://chillin.online, which is also WebGL-based and renders very quickly. I'm interested to know if Repaint will migrate to WebGPU, as Chillin is planning to do so. I believe that web apps using WebGPU for rendering can be even faster than native apps!

We're not sure. WebGPU seemed too early to us. But as I got deeper into WebGL, the ability to do more arbitrary computation sounded more and more appealing. I wouldn't be surprised if migrated down the road.

This looks extremely slick- it makes me want to use this editor tech to build something akin to Flash or HyperCard for small interactive apps

I wonder if there is ever a world where the websites themselves are just WebGL, and no one has to worry about CSS ever again. Ignoring a11y and CPU/GPU usage, that is...

Edit/addition: Congrats on your product! Always great to see a high-quality, pure software project get funded and realized. If I ever do YC (non-ivy so probably not in the cards) I'd probably do something like this.

We dream about this all the time. Unfortunately, it breaks too much default behavior like browser extensions, password managers, SEO...

Maybe one day :)

I guess there'd need to be an API for extensions to treat WebGL rendered text as synthetic DOM node. Maybe WebGL apps expose and update a "virtual DOM" that represents how extensions/Google should interpret what is rendered...

Repaint might be in some sense the bridge, though!

Web.GPT.GL_AgI bot proxy to handle such pedestrian digital quibbles, indeed ;-)

I went to a non-ivy school and dropped out. There's always hope :)

I appreciate this is at an early stage, and it's looking great so far.

Some questions:

- Is there a plan to offer an export option to output the static html?

- What are the constraints around using CSS frameworks, like Bootstrap or Tailwind, especially when exported?

- Are there integration options planned? For example, if I wanted to pull in content from a headless CMS or other data sources.

Looks insane! Since you mentioned Figma, a Figma project import feature would be very useful for a project like this.

Looks cool, and it's a good idea.

I tried a very simple example (imported a nav bar, added a container, put some stuff in the container) and the live version was not responsive at all. Nav bar was a fixed width. The whole page was in the upper left corner of my screen. Did I do something wrong?

There's likely a few settings that you'll have to update on the sections. If the page is a block layout the width of the navbar and container should be auto (to fill the page).

We're currently working on our onboarding to solve this. It should be easier to make a basic responsive page from the templates.

Thanks for the response!

This is super interesting and has a lot of overlap both with the product I'm building and with my need for a website. Looking forward to giving this a real try in the next couple of weeks and will reach back out to you then

Congrats on launching. WebGL is really hard, I built a similar engine and it's tougher than it seems.

Your budget is only 8.33ms if you target 120hz too btw :) And realistically less because you don't get all of it.

I would argue a web designer might not even need 30fps.

Whenever my frame rate drops on larger projects I can feel the difference. We probably don't need higher frames, but it feels better.

640K should be enough for anybody

I just wish it would let me get the feel without any data collection first and as soon as I look like I'm interested .. I want to share, save, do something more advanced .. only then go fish.

We made the playground so that you can try Repaint without signing up.

what playground? the linked website has only a "Get started" button which leads to a signup form.

At the top of this post there is a link to the playground.

Here's the link: https://app.repaint.com/playground

So anyone discovering repaint organically has no chance to find it? Essentially gatekeeping it to HN insiders? interesting approach

I’m curious what you guys used for generating text. Canvas 2D to a texture?

And congrats. I’ve dabbled a little in trying to use WebGL in places where DOM would the typical choice, and quickly ran away. :)

We use msdf textures. Generate them dynamically when people upload fonts. We tried 3 methods, and we're sticking with msdf for now because its very fast.

Don't zoom in too close on the text :)

Hi, looks really promising. It looks like this on my phone though: https://ibb.co/QY7T7Gs

I'm on S20 FE

Fixed. Thanks for catching this!

Is your website made with repaint? benshumaker.xyz seems could not be indexed by a search engine because everything is draw live. Am I missing something?

Looks like it is! I see Repaint references in the source code.

Yes, repaint.com is made in Repaint.

What do you mean drawn live? The content is animated, but is still present in the DOM for indexing purposes.

I love how Flash like tooling is making its comeback.

Do you have any plans for releasing an SDK or something similar? I would love to use this as the base for something else I'm building

What does one use to build a WebGL rendering engine? What should I learn, and where to start?

Probably WebGL

The engine is written in Typescript.

Here's a good place to start for the basics: https://webglfundamentals.org/

Absolutely get rid of that signup page, not going to try it out if I have to sign up, soz.

We made a playground for HN if you want to try it without an account. It's linked in the post. https://app.repaint.com/playground

This is very cool! How do you guys compare to the incumbents like Webflow and Framer?

Thanks!

We think our ux foundation is stronger. Many high-frequency actions are faster: moving between pages, copying content between them, multi-select editing. Especially if you're used to Figma. A lot of designers feel like Webflow is notoriously cumbersome to use.

But we also want to keep it very close to html/css. We think it's the only way too push power really far. Webflow did that. Framer's diverged quite a bit. We imagine it might go beyond a website builder to be a generally good "design tool for code"

Is it possible to build something like Canva / Figma in Repaint?

Do you mean make Figma's editor in Repaint's editor? We can't even make Figma outside the editor :)

What is an open canvas? What problem does it solve?

An open canvas means you can see all the content in your website on one screen, like Figma. This is different from other website builders.

This makes editing your content and navigating your project easier.

Congrats on launching!

What language / toolchain are you using?

The whole app is written in Typescript, except the webserver (Golang). We've already started to run into some performance issues on large projects.

Eventually we will write the frontend in C++ (using emscripten to compile to JS). The UI will use React, but the canvas state will be in C++.

Also, the monolithic backend will be split apart and rewritten in a different language to optimize speed.

We have a lot of work to make it more performant, but it's going to be fun to build :)

Congrats on launch, incredible work!

Btw, your pricing is broken :)

Should be fixed. Thanks for the note!

Will it ever be possible to export the code, or will it follow the Framer playbook?

We don't have any plans either way, but we've been thinking about this a lot. We've realized Repaint might be useful as a Figma that makes real code, so we're open to alternative business models.

Frankly, we've been very focused on making Repaint a great design tool to build websites and haven't thought about hosting that much.

Would you want to self host? Or maybe edit the code output?

As a Dreamweaver alternative would be interesting.

I wouldn't even consider Repaint if i don't have access to the source code. I see it as a good starting point (like Figma), but i'll never rely on a WYSIWYG editor alone.

As presented only makes sense for competing with Wix for power users.

Same. If there were a good WYSIWYG editor that would output well-formed Javascript (especially React) that was easy to edit/maintain by hand, I'd pay in a heartbeat. Everything I've tried in the past had too much friction. Something like Tailwind UI in an editor that spat out the same type of code as Tailwind UI gives would be killer.

But to the point, if my output is locked to the tool, I'm not going to use it. If I can get at least an uglified version of the source that I can host on my own Nginx, then it's a possibility, but not having at least that is a total deal breaker for me.

Why is it a deal breaker? For marketing websites and landing pages, I would prefer not to have to write any code because the frequency of changes is so high and I'd rather have my engineering team focus on building product.

If you're talking about wanting to use this tool as a starting point for actual applications, then I would see why you'd need to export JS/React code.

Well maybe you found a very specific niche, but for mkt landing page most ppl would prefer one of the very mature competitors that collect analytics, offer insights, capture email, have templates, etc.

Agreed with this.

Login to try a website? No, thanks.

There's a playground in the post if you want to try it without making an account :)

    How does Repaint handle responsiveness?
    
    First you design your website for desktop. Then you make adjustments on different breakpoints. In design terms, Repaint uses autolayout and breakpoints.

I'm curious, why did you choose to go with desktop-first rather than mobile-first here? I'm not saying it's wrong. I'm mostly curious what the thought process was, because my very limited experience has been that mobile-first is a lot easier.

It's easy to go all out with a desktop design and discover it's not practical for a mobile view, nor is it easy to find ways to scale it down and have it make sense both aesthetically and technically for a smaller screen. On the other hand, it's not so difficult to start with limitations that can then scale out into something else as screen real estate allows.

Are these potential issues mitigated by how the tools allow you to layout and design things in Repaint?

Another thing, what are your plans around accessibility and semantics? How is the SEO for these sites? I noticed "Welcome to the Playground" in the playground is a p tag with an id. Almost everything is divs and p tags. Not to detract from what is clearly incredible software so far; you're all doing an awesome job. I'd be extremely happy with myself if I accomplished this.

edit: I ran a lighthouse test on the preview and I see the SEO and accessibility are higher than I expected. The performance score is excellent. The others aren't great, but they likely beat a lot stuff out there. I mean, visit any recipe website and weep for the modern internet.

edit edit: I'm realizing you could probably generate some decent document structure/semantics by having the user indicate the intent of some root items, like headers, subtitles, and sections. That's plenty to get some great meta and intent, right? You've got the hierarchy of the page, you can infer some info from properties of the containers and text, etc. There's a ton of potential to get excellent results here without too much knowledge or input from the users.

My totally unasked for suggestions:

    - a section in the editor for adding these details
    - components

Honestly, we did desktop first because that seemed to be the default for most websites we looked at.

We plan on giving the users control over what tag each element uses for SEO purposes (h1, section, etc.).

We have some SEO related settings that can be set (descriptions, title, etc.) and plan to add more.

You're right that we could make good defaults for SEO, it would probably improve our scores a lot. It would be cool if we could add some sort of checker directly in the editor. It could also give tips on how to remediate.

Looking at the results from lighthouse scores, you can totally translate that into a helpful guide for your users. You can even highlight the objects on the page with missing/poorly defined attributes.

This actually sounds like fun to implement. I suppose it should be opt-in, because some users genuinely won't care. And I imagine doing as much as possible by default would be ideal too, because this can turn into a huge chore which might make your product seem less efficient and convenient by no fault of its own.

Framer does the same thing regarding responsive layouts: desktop > tablet > mobile.

this doesn't seem to support non-english language that requires input methods.

how do you deal with Information Architecture, SEO, Interlinking, etc etc..?

Honestly we haven't focused on this yet. It's important that our websites are accessible and score well for SEO. Users will have settings to improve SEO on their site.

Idea: we integrate your canvas into our web info architecture mapping platform for the win!? https://VisualSitemaps.com

Dude. PLEASE MAKE IT EMBEDDED!!!

I need to integrate a "site builder" for a landing page service. I cant use things like the other options out there because they require actually going to the site. It makes it useless where i want a fully self contained "builder" for a number (bunch) of different landing page domains.

What do you mean by embedded? Like the editor can be embedded on other sites? Or the websites we publish are embeddable?

Make the editor embedded in another app. so I can just parameterize the "builder." I want to have the HTML on my own though so i can actually host the page myself. really I just want some fancy editor that outputs a JSON schema.

I literally almost built this myself twice, and just never got around to it.

typo on "exactly" on page. looks great tho

Fixed. Thanks for the note!

Sorry, but the landing page is a bit dull. I think you need a video showing a live demo of the product.

That's a good point. We built repaint.com in Repaint and we don't currently have videos in our editor. We will likely add a demo video on the site once we can.

This looks great!

Ill definately be building something with this. Il give more detailed feedback after use - but from vid:

Have you used SPLINE at all and looked at their events menu system for anims in Spline (which BTW you should take a look at how to integrate and work with the Spline folks as their app would be an indeal way to make interactive 3d UI/X on this as well...

But also - (il test this,) but UI scaling for the windows to get them out of way given canvas, the ability to s=zoom a single element/page on the canvas?>

And the ability to float menu panels to a second screen? (I have a USb monitor on laptop, move all the menu panels to that usb monitor and have the canvas full screen laptop)

-Excited to try this out later today.

https://old.reddit.com/r/Spline3D/top/

Thanks for the notes! I'll look into spline.

I've never of a web app that lets you pull panels to a second screen. Sounds neat though. Is there a good reference?

You can use window.open to create a child window whose DOM is writable by the main thread of the parent window. You can then mount a React root in the child and go off to the races.

This issue with this strategy is usually over reliance on 3rd party code that assumes that globalThis.window is the only window, and event handlers don’t end up working or something.

If you are using good libraries that really understand the DOM (React itself handles this well) or you write things yourself, it’s a bit of bother to add “target window” as a parameter to various functions that were previously using the global but quite doable.

I built an electron app that has one “root” window that is hidden that I use to spawn child windows without needing to load an entire new web page & instance of the JS bundle into each window. I used Tldraw and had to do some patch-package to fix global window assumptions in a few places.

Here’s my code: https://github.com/justjake/tlshot/blob/main/src/renderer/ed...

Show HN: Repaint – a WebGL based website builder