Nimble is a visual online code editor. It currently supports Tailwind CSS and will support popular libraries like Bootstrap, Bulma, and Material-UI in the future. It features HTML elements available to help build your components faster.
Web Components already offer a nice and clean API for creating native components in the browser. It helps to encapsulate CSS and HTML, but not JavaScript.
Hello hunters! I'm excited to be here today to show you one of our most recent products๐๐๐๐
**Note: We are still building nimble and new features are released every weekend...
Hope you'll love it!
Stay tuned to get 1 month free trail when we officially launch๐
Hi Fotie... Congrats on the launch. The idea is amazing.
I gotta feedback for you. I was trying to build my first widget and I had problems dragging the elements. First I put a button element at the bottom of the page, then I tried to put a video element on top of the button. However, when I released the video element, it was placed below my button I could never drag the button back where it was supposed to be.
tbh, I was not able to move the elements at all after being placed in the widget frame.
I use Safari 15.2 for that.
Hey @stzdio thanks for this amazing feedback. I really appreciate it. Like you might have noticed we are still working hard at rounding up with the product and shipping a beta version soon๐. ( It was published on here because we are building in public โจ and accepting feedback as we go!)
Here's the thing, actually this initially isn't a bug. Because nimble is built from the ground up to work with most already existing UI frameworks out there(tailwindcss, bootstrap, material UI etc) you should only be able to drop and edit the elements on the canvas by adding classes(framework specific classes because we are trying to follow the framework norms) to them on the configuration panel on your right. And because most of these frameworks aren't perfect we have an additional CSS section.
A fix to the problem: Due to this crucial issue, we will be releasing "grid divs" to the base elements pallet, with various columns and rows that you might need to build out your single component's layout. We are currently actively working on that at the moment.
Please let us know what your thoughts are about this, would really appreciate!
@fotiecodes thanks for replying, Fotie. I understood your proposition, I am gonna explore a little bit more of the tools. I am giving you the dummy feedback of a user using for the first time lol its always useful ... The fix seems pretty good, let me know when you release I can give you feedback on that.
I like the look of the editor, gonna assume all the buttons that don't work because this is basically alpha. Here is some feed back.
1. It is not super intuitive that dragging the element from the tooltip do the canvas is how you add element to the canvas.
2. The user most know the classes to know what to add, but this is aim towards people that do not know the css library.
3. I don't actually think is faster if the developer just type down the class name and have their app hot reload and quickly see the results. (at least the way it is right now)
Anyways, I see this a great learning tool to give to the public for free and not a paid platform (as of now and the future mvp). Congrats and good luck =)
Hi @dot_michael, million thanks for the feedback on this. Indeed we are still working on nimble. I really appreciate man. Let me go ahead and point out a few points you made mention, respectively.
1. We will try our very best to give in the best experience to our users, the current UI is meant for our MVP :)
2. Initially, the project is built for developers, however developers don't necessarily master all the classes of these frameworks. Consequently we are building a more user friendly way to add classes to elements, even without mastering the framework in question. for example you can type in simple English and you will be suggested the equivalent classes in the specific framework you use.
3. Nimble isn't meant for building websites, it's built with the component mindset. You build your little chunks of components visually and simply export the code. You'll still need to Import and use those built components in your project. There isn't a hot reload you see the rendered results directly on your canvas.
The tool's primary goal is to help front-end developers get things done faster. Ship projects faster with high quality code, hence we do believe there should be a minimum fee!
Thanks!
Invoice Dashboard by Notion and Figma