Learn to debug your UI real time using LEVA

[@surajnukala8139]

wow, really cool work short, sweet, crisp and amazing 🔥🔥🔥

[@threeveloper]

Thank you! Glad you liked it 😄✌️

[@EnglishAdventures]

Your tutorials are the best! Well taught, simple to follow, and you give us the code! I spent hours yesterday researching reflective surfaces and your other video helped me do it in 20 min! Thanks and keep up the excellent work!!

[@threeveloper]

Thanks for your kind words! :)

[@sagred7832]

Learning a lot from your videos. For the beginners watching your videos will make a strong impact and also saves a lot of time.

[@threeveloper]

Great to hear that ✌️

[@sagred7832]

Your content is awesome 🔥🔥

[@fteiyp]

love these!

[@threeveloper]

Thanks Reid! 🥳✌️

[@alvin3171997]

So leva is equivalent to dat.gui for three.js?

[@surajnukala8139]

hmm, dat.gui can also be used with three.js, but LEVA is maintained by the same team as r3f so ig that's a reason to use it for r3f projects

[@threeveloper]

Great question! It is used for the same purpose, indeed. But leva integrates better with react and react three fiber as Suraj also mentioned. You could probably notice how easy it was to set up 😉 By the way, tweakpane is another great alternative for dat.gui as well. It works with plain JavaScript, but can be extended to easily use in react by adding the use-tweaks package. Dat.gui hasn't released any new versions since 2017, so it's not actively maintained anymore, which is why I prefer to use another library. Also, the UI of leva is just better 😄

[@timblack4628]

your videos are awesome keep it up! i am learning so much from them. it would be great to do a full video on Leva for all of the types of inputs and how to use them. the documentation is very limited and there are not a lot of tutorials our there for this GUI. thanks once again!

[@threeveloper]

Great to hear, thank you! Will put it on my list of video ideas 💡 ✌️

[@patrix4746]

Great video again. Leva is amazing. I tip is to speak a bit slower and louder, otherwise superb

[@threeveloper]

Thank you once again, will keep it in mind 😄

[@patrix4746]

@@threeveloper Just don't loose your flow and excellent explaining abilities :-)

[@dimitrik3d820]

How can I make one of the leva slider to appear or disappear on condition if box is checked? For example when bool true the folder will be visible and when false its hidden and values are reset to default.

[@threeveloper]

I'm not aware of that being possible right now, but the package is still developing so for the latest changes it's best to ask the team directly in their discord. They're very active in their support!

[@bizarrocebola]

Hi, Problem : return ( ); } Error for Box. Thank you

[@threeveloper]

Hi there! Box will need to be imported from @react-three/drei. Did you install this package and add the import statement?

[@bizarrocebola]

@@threeveloper Thank you, it works now, however I had installed @react-three/drei, the magic of programming

[@jankarl5269]

I don't get how threejs is this big-I mean babylonjs has these things by default already

[@CristianDavidVillotaJacome90]

Excelent video and Leva is easy to use. The only problem with Leva is it doesn't run very well with React 18. I have a warning saying that. Could you share the configuration to solve that warning?

[@threeveloper]

Hi Christian, what warning do you get exactly?

[@CristianDavidVillotaJacome90]

@@threeveloper Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

[@threeveloper]

Ah I see what you mean. Leva doesn't support React 18 yet and currently adds the leva GUI using the old ReactDom.render method. You'll, unfortunately, have to wait until leva supports React 18 to get rid of this warning. Or you could always create an MR for them of course! 😉

[@browix3114]

thanks

[@krazybubbler]

LEVA is cool but it's under developement still. I've had tons of troubles to use it with multiple stores (ie. sphere and box on the scene, each with unique attributes which I'd like to edit once an element is selected). Seems like really straighforward scenario but I didn't find any example that would deal with it properly.

[@threeveloper]

The amount of documentation, questions and answers is still limited and it's still under development indeed. That's also why I mention in the video that I think it's a great tool to use for debugging purposes, but I wouldn't recommend using it for production yet. I'll be using LEVA more in future videos and when I'm going to create a project and share that on KZbin, possibly also with cases like yours. Thanks for your comment though, I'll take this into account for future videos! ✌️

[@krazybubbler]

@@threeveloper i think this lib has enormous potential, especially with the whole r3f pmdrs ecosystem. I still use it in different scenarios and definitely recommend it to others for their use cases. Thanks for this video. I think it's great!

[@christoleva6764]

Hook me UP👁️🙏