Styler 🎨

View Demo · Report Bug · Request Feature

Introducing Styler 👋

Styler is the next gen custom CSS builder developed to supercharge your hashnode blog. Styler comes with awesome features like Live Preview, Dark Mode Support, Breakpoints support, templates and much more to standout out your blog. Try out Styler 🙌

Read blog to understand better 📖

🚀 Demo

Try the App: styler.vercel.app

🧐 Features

Let me share the outstanding features of Styler.

• 💯 Live Preview
• 🎩 No more inspecting
• 🍭 Break Points Support (mobile, tablet, desktop)
• 🌘 Dark mode Support
• 🌱 Ready to Use Templates
• 🥁 Generate CSS for Home and Article Page
• 💻 Fully Responsive
• 🔥 CSS AutoComplete
• 🚀 Handle hover, focus effects -✨️ Instructions on how to use
• ⤵️ Full creative freedom (user fonts, before, after, nth-child() and everything )

Take your blog to next level wih styler, lets go to the moon! ✨️

🛠️ Installation Steps

1. Clone the repository

git clone https://github.com/saviomartin/styler.git

2. Change the working directory

cd styler

3. Install dependencies

npm install

4. Create .env file in root and add your variables

AUTH0_SECRET= YOUR_AUTH0_SECRET
AUTH0_BASE_URL= YOUR_AUTH0_BASE_URL
AUTH0_ISSUER_BASE_URL= YOUR_AUTH0_ISSUER_BASE_URL
AUTH0_CLIENT_ID= YOUR_AUTH0_CLIENT_ID
AUTH0_CLIENT_SECRET= YOUR_AUTH0_CLIENT_SECRET
NEXT_PUBLIC_SUPABASE_URL= YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY= YOUR_SUPABASE_ANON_KEY

5. Run the app

npm run dev

You are all set! Open localhost:3000 to see the app.

🍰 Contributing

• Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

• Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

💻 Built with

• Next JS
• Auth0: Complete User Authentication
• react-icons: for icons
• supabase: for database
• headless-ui: for components
• codemirror: for code blocks
• query-string: for parsing query
• Material UI: for components
• Vercel: for hosting

🌈 What's next

Here is the roadmap of the future of Styler 🤞

• history of prevois codes
• Share preview URLs
• Live Collaborate with patner
• More Templates
• Better Position Tracker
• Change the default preview page with users own page

🛡️ License

This project is licensed under the MIT License - see the LICENSE file for details.

🦄 Deploy

👨‍💻 Author

👤 Savio Martin

• Twitter: @SavioMartin7
• Github: @saviomartin
• Hashnode: @saviomartin

🙏 Support

This project needs a ⭐️ from you. Don't forget to leave a star ⭐️

If you found the app helpful, consider supporting me with a coffee.

Styler needs a ⭐️ from you