Would Magic UI work with toddle?

mrwildenfree · 2024-09-05T19:55:29.173+00:00

I'm curious to know if this component suite would work with toddle?I am still very much on the new user end of the spectrum, and I don't know what is currently possible, but I imagine it would be incredibly helpful for builders to be able to copy & paste components built in Magic UI and get those to function right within the visual development environment. Perhaps its also worth mentioning if this is/could be possible to do with shadcn/ui as welll.Anyone know if this is possible or has tried it yet? (Also consider this a feature request if its not yet something we can do)

mrwildenfree
1 year ago
I'm curious to know if this component suite would work with toddle?

I am still very much on the new user end of the spectrum, and I don't know what is currently possible, but I imagine it would be incredibly helpful for builders to be able to copy & paste components built in Magic UI and get those to function right within the visual development environment. Perhaps its also worth mentioning if this is/could be possible to do with shadcn/ui as welll.

Anyone know if this is possible or has tried it yet? (Also consider this a feature request if its not yet something we can do)
Tom Ireland
1 year ago
You can copy and paste HTML but I don't think this will work if using Magic UI components because these are rendered using React. You can absolutely create this type of component suite in toddle though and share components as web components.
🙏🏾1
@Tom Ireland
You can copy and paste HTML but I don't think this will work if using Magic UI components because these are rendered using React. You can absolutely create this type of component suite in toddle though and share components as web components.
mrwildenfree
1 year ago
Thanks for the response here Tom. That is helpful to know. Here's hoping that one day it can be possible somehow for this to happen. Maybe it is a 2-step process for copying the component code & then asking the AI inside of toddle to rebuild it as a component in the VDE, where it could plug in any added values necessary to make it work
Tod
1 year ago
Great energy @mrwildenfree! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
mrwildenfree
1 year ago
Curious to get some additional thoughts on the above, @Andreas Møller, @NoCode ProCode, @Chris Laupama — thoughts on making it possible to copy / paste typescript & react based component into toddle? Or somehow getting it to transform them into matching native components?
@mrwildenfree
Curious to get some additional thoughts on the above, @Andreas Møller, @NoCode ProCode, @Chris Laupama — thoughts on making it possible to copy / paste typescript & react based component into toddle? Or somehow getting it to transform them into matching native components?
Lucas G
1 year ago
Unlikely to happen
toddle is its own framework
Lucas G
1 year ago
Going through the trouble of porting it is a not a straightforward task and you'd likely have a better outcome by simply creating everything in toddle natively
🙏🏾1
mrwildenfree
1 year ago
Got it, thanks for breaking that down for me @Lucas G
@mrwildenfree
Got it, thanks for breaking that down for me @Lucas G
Lucas G
1 year ago
There are other threads discussing using React in toddle that you can read through if you'd like. The TLDR is that while possible, it's not recommended as you'd be adding a lot of overhead and losing performance and you're almost always better off building in toddle
💪1
And the community is incredibly helpful which makes building in toddle a lot nicer
❤️1
mrwildenfree
1 year ago
That makes sense. I suppose in my mind, it was the "porting over" being considered here mostly. And I might have been hopeful that this could be achieved with say, the upcoming AI features that could possibly take the code example from another framework, and then transform it into a native component in toddle based on what it's interpreting from it.
Lucas G
1 year ago
Technically possible but I don't know if AI would be good enough for the task 🤔
I would assume you'd see some big inconsistencies depending on what you'd try to port over
@Lucas G
Technically possible but I don't know if AI would be good enough for the task 🤔
mrwildenfree
1 year ago
Right. to be able to recreate it flawlessly between frameworks that may or may not have a 1:1 dynamic on how things are built...
Lucas G
1 year ago
How it was written, what dependencies it uses, etc
👍🏾1
mrwildenfree
1 year ago
That's just me & my Wishful thinking I suppose lol
Lucas G
1 year ago
Think of it like porting to any other framework
Possible and easier to do for smaller projects but not recommended for scale
@Lucas G
Think of it like porting to any other framework
mrwildenfree
1 year ago
That might be the experiential context that I'm missing — why I might have been asking a question of such perceivable naivety lol
Primarily coming from Webflow
Lucas G
1 year ago
It's not really naive
toddle is different from other nocode/web builder things out there
mrwildenfree
1 year ago
only surface level knowledge of coding, still wrapping my head around it. No practical coding experience yet
Lucas G
1 year ago
A lot of questions get mixed around lol
😆1
@mrwildenfree
Curious to get some additional thoughts on the above, @Andreas Møller, @NoCode ProCode, @Chris Laupama — thoughts on making it possible to copy / paste typescript & react based component into toddle? Or somehow getting it to transform them into matching native components?
NoCode ProCode
1 year ago
I added React Components in Toddle using ReactDOM 😉
👀2
@mrwildenfree
only surface level knowledge of coding, still wrapping my head around it. No practical coding experience yet
Lucas G
1 year ago
toddle is a great learning tool too tbh
✨1
Helps learn a lot of web concepts
❤️2
See it's possible. I want to say someone else has done it too
Using React in toddle I mean
It just was a lot of overhead to add which made it not make sense for large projects
💯1
@Lucas G
toddle is a great learning tool too tbh
mrwildenfree
1 year ago
That's what I'm hoping as welll! That using toddle will be a step forward in the progression of learning programming & web concepts, and leaning me further into the low-code experience rather than mostly no-code lol
Lucas G
1 year ago
https://blog.nordcraft.com/no-more-no-code
👀1
I think this is a great piece to get some perspective on toddle
@NoCode ProCode
I added React Components in Toddle using ReactDOM 😉
mrwildenfree
1 year ago
That's fascinating! I'm not familiar with ReactDOM, but overall I was just hoping that I could blend these kind of component library resources together & still take advantage of them while exploring toddle. It'd be an ideal case scenario if I could take from them & have them quickly converted into native toddle components. But I'll just have to do a lot of exploring first inside of toddle to learn about it & its framework & then figuring out how to recreate the things that I want to create.
@Lucas G
It just was a lot of overhead to add which made it not make sense for large projects
mrwildenfree
1 year ago
Yeah I can see how that might be a factor.
@Lucas G
https://blog.nordcraft.com/no-more-no-code
mrwildenfree
1 year ago
Thanks for sharing this — I'll have to check it out!
@mrwildenfree
That's fascinating! I'm not familiar with ReactDOM, but overall I was just hoping that I could blend these kind of component library resources together & still take advantage of them while exploring toddle. It'd be an ideal case scenario if I could take from them & have them quickly converted into native toddle components. But I'll just have to do a lot of exploring first inside of toddle to learn about it & its framework & then figuring out how to recreate the things that I want to create.
Lucas G
1 year ago
If you haven't already go through the 7 days of toddle video series and of course you can always get help here when building
@Lucas G
If you haven't already go through the 7 days of toddle video series and of course you can always get help here when building
mrwildenfree
1 year ago
Thank you! Yeah I still have to do that. I've been in dissaray because I'm often trying to do so much across many different vectors & while there's alignment in the things that I'm doing, I am recognizing that I have to amplify my discipline or relinquish trying to be the operator in every aspect of execution. I'm primarily a music artist but earn a living off of design & tech related freelance work (Notion, etc.), but I always have a desire to learn & piece things together myself...

I'm hoping that I could learn toddle and use it to also work with Web3 related protocols, APIs & SDKs to build something truly unique. Time will tell though!
🔥2
@mrwildenfree
Thanks for the response here Tom. That is helpful to know. Here's hoping that one day it can be possible somehow for this to happen. Maybe it is a 2-step process for copying the component code & then asking the AI inside of toddle to rebuild it as a component in the VDE, where it could plug in any added values necessary to make it work
Andreas Møller
1 year ago
It probably won’t be happening anytime soon, but there is no reason why you couldn’t build the same in toddle.
@Andreas Møller
It probably won’t be happening anytime soon, but there is no reason why you couldn’t build the same in toddle.
mrwildenfree
1 year ago
Yeah wishful thinking lol. I was just hopeful that it could be an incredibly helpful time saver for me.
@mrwildenfree
That's fascinating! I'm not familiar with ReactDOM, but overall I was just hoping that I could blend these kind of component library resources together & still take advantage of them while exploring toddle. It'd be an ideal case scenario if I could take from them & have them quickly converted into native toddle components. But I'll just have to do a lot of exploring first inside of toddle to learn about it & its framework & then figuring out how to recreate the things that I want to create.
NoCode ProCode
1 year ago
I would use Toddle only - but if you every need to add ReactFlow - you can add react as webcomponents that run on JS 😉
Andreas Møller
1 year ago
It is technically possible, but I wouldn’t recommend it. I don’t think it will be worth the trouble.
Andreas Møller
1 year ago
toddle and react at not compatible, but you can put a react component in a toddle app and vice versa.

That could make sense in rare cases where you have a very complex react component that you don’t want to rebuild in toddle.
For a component library it will be far more effort than it is worth
😅2
😮‍💨2
🙏🏾2
@Andreas Møller
toddle and react at not compatible, but you can put a react component in a toddle app and vice versa.

That could make sense in rare cases where you have a very complex react component that you don’t want to rebuild in toddle.
For a component library it will be far more effort than it is worth
mrwildenfree
1 year ago
Had a random thought, but would this also be the same sentiment for things like being able to copy / paste Rive or Spline elements into toddle?
Tod
1 year ago
Great energy @mrwildenfree! Your continuous contribution to the toddle Community just made you advance to Community Level 3!

Would Magic UI work with toddle?

mrwildenfree

Tom Ireland

mrwildenfree

Tod

mrwildenfree

Lucas G

Lucas G

mrwildenfree

Lucas G

mrwildenfree

Lucas G

mrwildenfree

Lucas G

mrwildenfree

Lucas G

mrwildenfree

Lucas G

mrwildenfree

Lucas G

NoCode ProCode

Lucas G

mrwildenfree

Lucas G

mrwildenfree

mrwildenfree

mrwildenfree

Lucas G

mrwildenfree

Andreas Møller

mrwildenfree

NoCode ProCode

Andreas Møller

Andreas Møller

mrwildenfree

Tod