Announcing the Makerkit Dev Tools

Introducing Makerkit Dev Tools: Your New Development Companion

changelog

Hey there! 👋 We're excited to introduce Makerkit Dev Tools - your new best friend for developing and debugging Next.js Supabase applications. Let's dive into what makes this tool special and how it can make your development experience smoother.

While this is an early release, it's already feature-packed!

What's Makerkit Dev Tools?

Makerkit Dev Tools is a suite of development utilities that helps you validate, debug, and manage your Next.js Supabase application during development.

Key Features

1. Service Health Checks 🏥

Never wonder again if your services are properly connected. The Dev Tools automatically monitor and display the status of:

  • Supabase API Connection
  • Supabase Admin Connection
  • Stripe API Connection
  • Webhook Configurations

Each service shows a clear status indicator, so you know at a glance if everything's working as expected.

2. Environment Variables Manager 🔧

Managing environment variables can be tricky, especially when dealing with multiple environments and overrides. Our Environment Variables Manager helps you:

  • View all environment variables in one place
  • Validate variables against their expected format
  • Spot configuration errors early
  • Understand which variables are required and why
  • Understand which variables are being overridden by other environment files

The tool even shows validation errors with helpful messages so you can fix issues quickly!

3. Email Template Preview 📧

Testing emails during development has never been easier:

  • Preview email templates directly in the browser
  • Send test emails to verify formatting

4. Translation Management 🌍

Keep your internationalization in check with:

  • Centralized view of all translation keys
  • Quick search functionality
  • Language filtering

Getting Started

Using Makerkit Dev Tools is super simple - it's already included in your Makerkit repository! Just:

  1. Run your development server using pnpm run dev
  2. Open your browser to http://localhost:3010

Coming Soon! 🚀

We're just getting started! Here's what's coming up on our roadmap:

  • AI-Powered Translations: Automatically generate translations using AI
  • Extended Stripe Validation: Comprehensive Stripe configuration checks
  • More Service Integrations: Additional connectivity checks for popular services
  • AI Development Tools: Smart helpers for common development tasks

Feedback Welcome!

We built Makerkit Dev Tools to make your development experience better, and we'd love to hear your thoughts! Drop us a note on our Discord with any suggestions or feedback.

Happy coding! 🎉

Some other posts you might like...
Introducing the Figma UI Kit for MakerkitWe're excited to announce the release of the Figma UI Kit for Makerkit. This kit allows you to easily create beautiful and consistent UI components using Figma.
Announcing the React Native Expo Kit - an Open Source Kit for Makerkit appsWe're excited to announce the release of the React Native Expo Kit - an Open Source Kit for Makerkit apps. It's a fully-functional React Native app that allows you to build and deploy your SaaS using Expo.
2024 Review - and a look at the future2024 was a year of great changes for Makerkit. Here's a look at what we've accomplished and what's next.
Introducing a free and open source Next.js Supabase SaaS Starter KitLooking for a free Next.js SaaS Template? Announcing a lite version of our Next.js Supabase SaaS Boilerplate, now open source!
Using the new Shadcn Sidebar in MakerkitWe have updated the sidebar to use the new Shadcn Sidebar. It's a new design and a more powerful component. In this post, we will learn how to use the new Shadcn Sidebar in Makerkit.
Upgrading to Next.js 15Preparing the migration to Next.js 15. In this post, we will cover the changes that you need to make to your project to upgrade to Next.js 15, and how Makerkit will approach the migration.