It has panning, zooming, and dragging elements around. The settings closely follow html/css. We think an open canvas is a big improvement over other website builders. Everything is easier: styling, consistency, responsiveness…
But making it work was hard! We thought HN would appreciate the tech behind it: - A custom WebGL rendering engine (w/text, shadows, blurs, gradients, & opacity groups) - A partial implementation of the css spec - A custom text editor & text shaper - A transformer to turn designs into publishable html/css
Repaint is a design tool for html/css. But internally, it doesn’t actually use html/css itself. All your designs live in a single <canvas> element.
We wanted users to be able to see all their content on one screen. We target +60fps, so frames only have 16ms to render. The browser’s layout engine couldn’t handle simple actions, like zooming, with many thousands of nodes on the screen. To fix that, we wrote a rendering engine in WebGL.
Since we use custom rendering, we had to create a lot of built-in browser behavior ourselves.
Users modify a large dom-like data-structure in our editor. Each node in the document has a set of css-like styles. We created a layout engine that turns this document into a list of positions and sizes. We feed these values into the rendering engine. Our layout engine lets us display proper html layouts without using the browser's layout engine. We support both flex and block layouts. We already support multiple layout units and properties (px, %, mins, maxes, etc.).
We also can’t use the browser’s built-in text editor, so we made one ourselves. We implemented all the common text editor features regarding selection and content editing (clicking, selection, hotkeys, inline styling, etc.). The state consists of content and selection. The inputs are keystrokes, clicks, and style changes. The updated state is used to render text, selection boxes, and the cursor.
When you publish a website, we turn our internal document into an html document. We've intentionally structured our document to feel similar to a dom tree. Each node has a 1:1 mapping with an html element. Nodes have a list of breakpoints which represent media-queries. We apply the styles by turning them into selectors. All of the html pages are saved and stored on our fileserver for hosting.
We made a playground for HN, so you can try it yourself. Now that the tech works, we’d love feedback and ideas for improving the product experience.
And we’d love to meet more builders interested in the space. If that’s you, feel free to say hello in the comments! Or you can reach Ben from his website.
Playground: https://app.repaint.com/playground
Demo Vid: https://www.loom.com/share/03ee81317c224189bfa202d3eacfa3c3?...
Main Website: https://repaint.com/
Contact: https://benshumaker.xyz/
- 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
- 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.
- 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!
- 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.
- 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).
- 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...
- 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.
- 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.
- 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!
- 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.
- 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
- 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.
- 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
- 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.
- 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 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?
- 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!
- 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.
- 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?
- 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.
deleted
- 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.
- 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. :)
- Hi, looks really promising. It looks like this on my phone though: https://ibb.co/QY7T7Gs
I'm on S20 FE
- 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?
- 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?
- Absolutely get rid of that signup page, not going to try it out if I have to sign up, soz.
- This is very cool! How do you guys compare to the incumbents like Webflow and Framer?
- Is it possible to build something like Canva / Figma in Repaint?
- What is an open canvas? What problem does it solve?
- Congrats on launching!
What language / toolchain are you using?
- Congrats on launch, incredible work!
Btw, your pricing is broken :)
- Will it ever be possible to export the code, or will it follow the Framer playbook?
- Login to try a website? No, thanks.
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.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.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- this doesn't seem to support non-english language that requires input methods.
- how do you deal with Information Architecture, SEO, Interlinking, etc etc..?
- 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.
- typo on "exactly" on page. looks great tho
- Sorry, but the landing page is a bit dull. I think you need a video showing a live demo of the product.
- 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.