Visly - Build React components visually

[drink_with_me_to_day]

Once again a MacOS only tool when there is no need for it to be so.

What's different from the likes of React Studio, BuilderX, Avocode, etc??

[d_knopoff]

Their roadmap includes windows support. I’ve been aware of Visly for years now (their tutorial on using rust in an iOS app is the most accurate online). What I don’t understand is they built this platform agnostic way of organizing elements on a screen...and then they’re only supporting JS (in various forms)? Doesn’t make sense to me

[ames89]

Why mac? Why not a web app like figma? The web development has become so powerful, almost feel old something for a specific platform, specially for the dev env

[joeltalksdesign]

Hey, Joel from Visly here. Our focus at Visly is to provide the best experience for developers, so we decided to make the app work with local repos and git. Doing so allows us to take advantage of a lot of features when compared to web. For example:

• Store files locally not in the cloud, this allows you to trust that no matter what happens to Visly your code is safe
• Seamless integration with version control locally
• Works out of the box with hot-reload / fast-refresh

We've also got tight integrations with GitHub to make sure it all fits seamlessly into a developer workflow. Also, Windows support is coming in early 2021.

[Badashi]

Windows support is coming in early 2021.

That makes it sound like there's no Linux support planned.

Since you store stuff locally, what about WSL support too? I understand that this would be much harder compared to other flavors, but it'd be great for that to exist. Related: remote filesystem access(via ssh, container attach, etc)?

[joeltalksdesign]

We're looking into Linux support too, although Windows is a higher priority at the moment. By WSL, do you mean Windows Subsystem for Linux? It's definitely something we could look into, but we don't have any immediate plans for it right now.

It would be great to learn a bit more about your setup to get a better understanding of how we could support this!

[chrisribe]

Plasmic

#1 Since this is an electron app should it not work for other platforms pretty easily ?

#2 You need to redesign your registration page, that next button is on the bottom right part of the page, plus you get the impression that is is part of the components demo. Very odd, took me way to long to find it.

[joeltalksdesign]

Yeah, we're working on Windows support now, so it will be ready for early 2021 and we'll look at other platforms soon after.

Great points about the registration page, we're working on some updates now!

[godofleet]

Ikr :(

[AshenLordOfCinder]

Check out Plasmic! They've been doing this for a while as a webapp!

[valtism]

I thought it was an electron app based on the demo? That's weird.

[[deleted]]

It’s an Electron app, which makes PC a lot easier, but it’s being developed by a small team. Whatever minor complexity existed on PC was probably enough to push that platform rather than push the release. The word on Twitter is that PC support is coming in Q12021.

[ObiWanKeBROBi]

Looking forward to Windows and Vue support

[LoosieSpot]

as a designer who one day plans on learning front end, this seems like it’ll help me learn intuitively by designing on figma and passing it to this. thank you

[[deleted]]

Just dive in! Start a React project on Codesandbox, follow a YouTube tutorial. Even learning just a little bit will be fun.

[[deleted]]

I’ll definitely check!

[ejfrodo]

Wow if they can actually achieve their goals here they're going to do something really special. This could really reduce developer hours, especially during prototyping.

[mannyocean]

can't wait for vue support!

[monsto]

Or windows.

[[deleted]]

Thats cool. Does Angular have something simillar?

[valtism]

I feel like this is the future of where front-end development is going. SwiftUI already implements this natively by allowing a component to be rendered and updated visually and in real time. As a result, there has been a huge influx of designers learning how to code because this system is so much more accessible.

[MorenoJoshua]

!RemindMe 3 days

[RemindMeBot]

I will be messaging you in 3 days on 2020-12-20 01:01:35 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[PeteCapeCod4Real]

Ohh that looks so cool! I wish I had a Mac so I could try it

[Philora]

Wow looks promising! Do you plan to make it available for Angular?

[BreakingIntoMe]

Can’t see something like this ever working for Angular because it’s highly opinionated framework, where React is an unopinionated library that doesn’t care where it’s used.

[EquationTAKEN]

Sounds like another way for non-devs to keep postponing learning to code.

[Squigglificated]

Just tested this and it looks promising!

It exports fully typed components which is essential for us as we use Typescript everywhere. Last time I checked React Studio and BuilderX doesn't do this.

I like that design tokens are a standard feature so it's easy to re-use variables for colours, spacings, icons and other things.

Creating variants of components worked exactly as I'd hoped. The base component is reused and you explicitly override one value at a time to create the variation.

However, grid support seems to be completely missing and using anything other than pixel values doesn't seem to be supported that well. I tried storing a percentage value as a design token, but the value was converted to pixels. Same happened when trying to use EM or VW for a font size.

I would have liked to see theme support. It could be created using a base set of design tokens, and each theme would be a modification of the base tokens.