[HN Gopher] Show HN: Repaint - a WebGL based website builder
       ___________________________________________________________________
        
       Show HN: Repaint - a WebGL based website builder
        
       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/
        
       Author : benshumaker0
       Score  : 122 points
       Date   : 2024-09-03 16:08 UTC (6 hours ago)
        
 (HTM) web link (repaint.com)
 (TXT) w3m dump (repaint.com)
        
       | suchintan wrote:
       | This is very cool! How do you guys compare to the incumbents like
       | Webflow and Framer?
        
         | benshumaker0 wrote:
         | 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"
        
       | lucasfcosta wrote:
       | 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.
        
       | drx wrote:
       | 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 wrote:
         | I would argue a web designer might not even need 30fps.
        
           | izakfritz wrote:
           | Whenever my frame rate drops on larger projects I can feel
           | the difference. We probably don't need higher frames, but it
           | feels better.
        
       | stoicjumbotron wrote:
       | Hi, looks really promising. It looks like this on my phone
       | though: https://ibb.co/QY7T7Gs
       | 
       | I'm on S20 FE
        
         | benshumaker0 wrote:
         | Fixed. Thanks for catching this!
        
       | handfuloflight wrote:
       | Will it ever be possible to export the code, or will it follow
       | the Framer playbook?
        
         | izakfritz wrote:
         | 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?
        
           | 627467 wrote:
           | As a Dreamweaver alternative would be interesting.
        
           | flockonus wrote:
           | 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.
        
             | freedomben wrote:
             | 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.
        
               | oliver-keh wrote:
               | 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.
        
               | handfuloflight wrote:
               | Agreed with this.
        
       | ptsd_dalmatian wrote:
       | Congrats on launch, incredible work!
       | 
       | Btw, your pricing is broken :)
        
         | benshumaker0 wrote:
         | Should be fixed. Thanks for the note!
        
       | throwaway333445 wrote:
       | 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 wrote:
         | We dream about this all the time. Unfortunately, it breaks too
         | much default behavior like browser extensions, password
         | managers, SEO...
         | 
         | Maybe one day :)
        
           | throwaway333445 wrote:
           | 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!
        
         | benshumaker0 wrote:
         | I went to a non-ivy school and dropped out. There's always hope
         | :)
        
       | truckerbill wrote:
       | 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 wrote:
       | 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 wrote:
         | 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.
        
           | pavlov wrote:
           | 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.
        
           | pka wrote:
           | I hope you know what you're in for! [0] Good luck and
           | godspeed :D
           | 
           | https://faultlore.com/blah/text-hates-you
        
             | izakfr wrote:
             | We've looked over this essay a few times and we can relate.
             | Rendering text is not for the faint of heart :)
        
       | yaj54 wrote:
       | 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.
        
       | sdwrj wrote:
       | Looks insane! Since you mentioned Figma, a Figma project import
       | feature would be very useful for a project like this.
        
       | runlaszlorun wrote:
       | 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 wrote:
         | 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 wrote:
         | Don't zoom in too close on the text :)
        
       | amne wrote:
       | 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 wrote:
         | We made the playground so that you can try Repaint without
         | signing up.
        
       | artur_makly wrote:
       | how do you deal with Information Architecture, SEO, Interlinking,
       | etc etc..?
        
         | izakfr wrote:
         | 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.
        
       | flockonus wrote:
       | About pricing, it's strange that neither specify access to the
       | generated source code?
       | 
       | Not sure what audience you have in mind.
        
       | 10000truths wrote:
       | 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 wrote:
         | 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.
        
       | samstave wrote:
       | 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 wrote:
         | 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?
        
       | muglug wrote:
       | 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 wrote:
         | 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.
        
       | steve_adams_86 wrote:
       | 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 wrote:
         | 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.
        
         | izakfr wrote:
         | 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.
        
           | steve_adams_86 wrote:
           | 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.
        
       | tmalsburg2 wrote:
       | What is an open canvas? What problem does it solve?
        
         | izakfr wrote:
         | 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.
        
       | scratchyone wrote:
       | 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 wrote:
         | 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.
        
       | billconan wrote:
       | this doesn't seem to support non-english language that requires
       | input methods.
        
       | specialist wrote:
       | IMHO, your strategy has always been the Correct Answer(tm). "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 wrote:
         | 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.
        
       | garganzol wrote:
       | Login to try a website? No, thanks.
        
         | benshumaker0 wrote:
         | There's a playground in the post if you want to try it without
         | making an account :)
        
       | Exuma wrote:
       | 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 wrote:
         | What do you mean by embedded? Like the editor can be embedded
         | on other sites? Or the websites we publish are embeddable?
        
       | JaggerJo wrote:
       | Congrats on launching!
       | 
       | What language / toolchain are you using?
        
         | izakfr wrote:
         | 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 :)
        
       | spdustin wrote:
       | 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 viewport1
       | (including dynamic) and container query2 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 wrote:
         | 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.
        
       | nikkwong wrote:
       | 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 wrote:
         | 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.
        
           | izakfr wrote:
           | 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.
        
           | nikkwong wrote:
           | 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.
        
       | xpl wrote:
       | _> 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...
        
         | FractalHQ wrote:
         | 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 wrote:
         | 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 :)
        
       | teaearlgraycold wrote:
       | 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 wrote:
         | 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.
        
       | hactually wrote:
       | typo on "exactly" on page. looks great tho
        
         | benshumaker0 wrote:
         | Fixed. Thanks for the note!
        
       | wg0 wrote:
       | 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.
        
         | peppertree wrote:
         | Text and css are both endless pits of undefined behavior. But
         | this would make a great ad builder.
        
       | zamadatix wrote:
       | 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 wrote:
         | 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?
        
           | zamadatix wrote:
           | 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.
        
       | patrick-fitz wrote:
       | Sorry, but the landing page is a bit dull. I think you need a
       | video showing a live demo of the product.
        
         | izakfr wrote:
         | 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.
        
       | yawnxyz wrote:
       | Is it possible to build something like Canva / Figma in Repaint?
        
       ___________________________________________________________________
       (page generated 2024-09-03 23:00 UTC)