Show HN: Repaint – a WebGL based website builder

[benshumaker]

Hey HN! We're Ben and Izak, founders of Repaint (YC S23). Repaint is like Figma, but for creating real websites.

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/

[nox101]

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

[benshumaker]

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 :)

[wg0]

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.

[rikroots]

> 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

[red_trumpet]

> 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?

[benshumaker0]

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.

[peppertree]

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

[yaj54]

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.

[truckerbill]

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

[rikroots]

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!

[benshumaker0]

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.

[tantalor]

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.

[71bw]

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.

[specialist]

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).

[izakfr]

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.

[lucasfcosta]

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.

[xpl]

> 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...

[computerthings]

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 :)

[FractalHQ]

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.

[benshumaker0]

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 :)

[sjud]

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.

[izakfr]

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.

[replwoacause]

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.

[izakfr]

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?

[scratchyone]

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!

[benshumaker0]

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.

[j-a-a-p]

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.

[benshumaker0]

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.

[aabbcc1241]

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

[computerthings]

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.

[spdustin]

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

[izakfr]

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.

[zamadatix]

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.

[izakfr]

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?

[p0w3n3d]

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

[izakfr]

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

[flockonus]

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

Not sure what audience you have in mind.

[muglug]

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.

[andreasley]

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.

[autoexec]

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.

[postscape]

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.

[nikkwong]

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.

[theodraul]

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.

[10000truths]

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?

[benshumaker0]

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.

[lukaqq]

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!

[benshumaker0]

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.

[doawoo]

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

[throwaway333445]

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.

[izakfritz]

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

Maybe one day :)

[benshumaker0]

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

[hi_hi]

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.

[sdwrj]

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

[teaearlgraycold]

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?

[izakfr]

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.

[airstrike]

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

[drx]

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.

[ranger_danger]

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

[amne]

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.

[izakfritz]

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

[runlaszlorun]

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. :)

[benshumaker0]

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.

[izakfritz]

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

[stoicjumbotron]

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

I'm on S20 FE

[benshumaker0]

Fixed. Thanks for catching this!

[fabmilo]

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?

[izakfr]

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.

[notpushkin]

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

[pjmlp]

I love how Flash like tooling is making its comeback.

[mcluck]

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

[joriskok1]

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

[izakfr]

The engine is written in Typescript.

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

[tempaccount420]

Probably WebGL

[webprofusion]

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

[benshumaker0]

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

[suchintan]

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

[benshumaker0]

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"

[yawnxyz]

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

[izakfr]

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

[tmalsburg2]

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

[izakfr]

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.

[JaggerJo]

Congrats on launching!

What language / toolchain are you using?

[izakfr]

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 :)

[ptsd_dalmatian]

Congrats on launch, incredible work!

Btw, your pricing is broken :)

[benshumaker0]

Should be fixed. Thanks for the note!

[handfuloflight]

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

[izakfritz]

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?

[garganzol]

Login to try a website? No, thanks.

[benshumaker0]

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

[steve_adams_86]

    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

[izakfr]

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.

[dnpls]

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

[izakfr]

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.

[billconan]

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

[artur_makly]

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

[izakfr]

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.

[Exuma]

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.

[izakfr]

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

[hactually]

typo on "exactly" on page. looks great tho

[benshumaker0]

Fixed. Thanks for the note!

[patrick-fitz]

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

[izakfr]

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.

[samstave]

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/

[benshumaker0]

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?