This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2024-07-08
Channels
- # announcements (16)
- # beginners (22)
- # calva (3)
- # cider (17)
- # clojure (2)
- # clojure-berlin (1)
- # clojure-denmark (4)
- # clojure-dev (4)
- # clojure-europe (22)
- # clojure-madison (1)
- # clojure-nl (2)
- # clojure-norway (34)
- # clojure-sweden (3)
- # clojure-uk (3)
- # clojurescript (9)
- # datomic (7)
- # deps-new (1)
- # events (1)
- # fulcro (1)
- # hyperfiddle (10)
- # lsp (43)
- # missionary (1)
- # off-topic (27)
- # pedestal (10)
- # polylith (1)
- # reitit (4)
- # releases (1)
- # squint (18)
- # xtdb (8)
What is the closest equivalent to this webflow-style direct manipulation example (react project) in cljs-land? https://github.com/onlook-dev/studio
I'm too lazy to check it out locally, but the demo video doesn't show anything code-related and the demo and docs links lead to the same repo so I really have no idea what it actually does beyond what things like Figma/Penpot can do.
I’m aware of https://github.com/cjohansen/portfolio and https://github.com/penpot/penpot. My understanding is that these tools don’t actually let you create user interfaces without coding, but only help either play with mock ups or view coded examples. Would be interesting to hear if someone else has a more in depth experience.
ah, there is an orange news site post with a bit more info, https://news.ycombinator.com/item?id=40904862
Yeah thats where i saw it today. It seems focused on “injecting” tailwind styles into an agnostic react app. > • This is technically a web browser that can point to your localhost, which injects some CSS into the page that allows you to select, drag, and drop DOM elements, then track and translate those changes back into React code. Theoretically, you could do this with any compiled framework but I wanted a reasonable scope for the launch (the first version was actually in Svelte). > • Some interesting challenges: 1. There is a React parser that is used to parse, insert the style, and serialize it back to code 2. There is a React pre-processor that traces the DOM elements to the corresponding code 3. There’s also CSS parsing, injection, and converting to Tailwind 4. This is also an Electron app so there’s a browser within a browser within a node app which makes message passing… interesting > • What’s next? We’ve already built a proof-of-concept for inspecting and selecting layers, dragging to reorder, and inserting new DOM elements that I’m working on porting over from our private codebase. We’re also exploring opening more tabs in new frames in order to A/B test the changes before committing to code. >
I guess Penpot might do the same if you can control the code generation via templates or something.
My vision might be more al’acarte direct-manipulation UI widgets, via Portal or other Repl-integrated UI framework (Portal = Reagent, Reveal = JavaFx, Membrane reactive spreadsheet concept… etc), That would stream changes back to runtime state (via code generation + reloading, or another mechanism like state hotloading), but be as open-ended as possible. Visualizing UI could also happen in another Portal window, or Porfolio, Clerk, etc. I am impressed by Emmy viewers with sliders in Portal, but in that case, it’s outsourcing to another ui framwork (leva.js). I think it would be good to control the editor ui. To avoid the traditional overstuffed clunky stack of parameter editor widget tabs (like most visual css editors), and be able to “push/pull” higher levels of abstraction, with as much real-time reactive streaming as possible (visualizing incremental interpolation, real time!) Also Data Rabbit has something in the ballpark.
Oh, also check out https://blog.visr.pl/posts/intro/
Neat! 👀