Tailwind css visual builder for building beautiful webpages and components. Supports HTML/REACT/VUEJS code export.
Hello everyone 👋,
I have been working on Windframe a visual builder tool that enables you create Tailwind CSS websites, webpages components and prototypes for your projects using a drag and drop interface.
Windframe comes with a collection of regularly updated 230+ tailwind css block templates you can easily put together in any way you want to quickly create a webpage or you can build your own webpage visually from scratch in a very intuitive way using windframe.
You can also edit the blocks in anyway you want using the numerous editing options available on windframe or using tailwind css classes.
You can preview your designed webpages and easily export them to a HTML/ REACT/ VUE components and page. This makes it very easy to copy and paste to your own codebase.
I am working on some new templates and a lot new features that I am really excited about like shareable links to enable you share live links of your pages with anyone. This should be available in the coming days.
But here is a public roadmap if you will like to keep up with the development


Been working and improving this for quite a good while now. Really appreciate any thoughts, feedback or ideas on improving this. Thank you so much!
Pretty cool :-)
Should this be for prototyping to accelerate the development and give you a code base? Maybe then it would be nice to also lets you export that into a new git repository that already fill that with e.g. create-react-app to give you the right starting point to start coding (or if it's static to just push it to netlify) :-)
Thanks so much Matthias!
Yes that is one use case users are using it for. Although a lot users also building landing pages and export them. There is button below the modal to download the static file of your design but I need to make that more visible thinking about it now.
Ya, that will be so cool. I have done a bit of research on this in the past but always had some blockers. I will need to connect to the github api and have access to the users github to be able to push to the github account before I can get it published on netlify.
Do you see this being a good workflow or is there a better way I can go about this? I have also been thinking of just pushing to my own github instead and connecting that to netlify to create all the websites on one account. This might be a good approach but I have not really thought about if they will be any downsides to this. But I am really curious to hear what you had in mind.
On creating a new git repo for users when they export to react or vue I am definitely adding this to the roadmap. Thanks so much for all your feedback. Appreciate!
pushing to to your own github account and deploying it to netlify could be great way to easily show the page to colleagues and friends or even to strangers if static content is enough for me for testing.
My workflow would look like that:
prototype with windframe, show it to colleagues, iterate on it -> start a new git project with create-react-app (CRA) or create-next-app (CNA) -> create github repository for that -> export windframe prototype as react and copy-paste-integrate it into my new app -> continue building
I thought it would be great if you could automate the steps with creating a new app->pushing to github->integrating it to CRA/CNA. But that's only me and my stack ;-)
Gotcha! I totally get what you mean. I think I can get the workflow of at least exporting a CRA/CNA app when you export the code. But the issue I am thinking might be that the user don't want the blocks as components or might have started a project already and my arrangement of components in the CRA/CNA app might not be what he/she had in mind. But adding this as an option for anyone who is just starting a project newly to be able to export a CRA/CNA app with the blocks as different components or still the option of just copying from the editor would be so rad. Jotting this down on the road map as a feature. Thanks
For Netlify you definitely made me think about this more clearer now and that workflow is exactly what I had in mind for the live shareable link feature that I am currently working on, but it was to work differently.
Using Netlify makes more sense to me now than the approach I was going for since its just for showing others and getting feedback.
Thanks again for taking the time to give to go through and the valuable ideas!