Overview

Framework-agnostic, type-safe tool to validate and preview your environment variables - powered by your favorite schema validator.

Environment variables are essential but tricky to manage safely. Missing or invalid variables can cause hard-to-debug runtime errors.

This package provides type-safe validation with minimal setup. Define your schema once and access your environment variables with full TypeScript support.

It also includes an interactive CLI with realtime previews for easy environment configuration validation during development.

Reasoning

Most applications require some form of environment variable validation, but implementing this correctly becomes increasingly complex as your project grows. You might start with simple existence checks, but soon find yourself writing custom validation logic, handling type conversions, and managing different environments.

Rather than reinventing this wheel in every project, this library provides a battle-tested solution that handles all the common challenges. It abstracts away the implementation details while giving you powerful customization options when needed.

The design is framework-agnostic, meaning whether you're using Next.js, Vite, or any other JavaScript framework, you get the same robust validation strategy that has been refined through countless real-world applications.

Core

The core package provides type-safe environment variable validation for any JavaScript framework. Define your schema once using any Standard Schema validator and get full TypeScript support throughout your application.

env.config.ts
import {  } from "envin";
import {  } from "zod";

const  = ({
  : {
    : .(["development", "production"]),
  },
  : {
    : .().(),
  },
  : {
    : .().(),
    : .().(),
  },
  : "NEXT_PUBLIC_",
});

.DATABASE_URL;
type DATABASE_URL: string

Key features include client/server variable separation, extendable presets for popular platforms, and comprehensive error handling. Works seamlessly with Next.js, Vite, Astro, and any other framework.

Your server-side environment variables are strictly protected from client-side access. If you try to access a server variable on the client, you'll receive a clear error message to help identify and fix the issue.

client.tsx
"use client";

import env from "../../env.config";

export const Client = () => {
  return <div>{env.DATABASE_URL}</div>;
};

Invalid access

CLI

The interactive CLI provides a real-time preview of your environment variables during development. It processes your .env files, validates them against your schema, and displays the results in a beautiful web interface.

Live Preview

Perfect for debugging configuration issues, onboarding new team members, and ensuring your production environment is properly configured before deployment.

Live Preview

Learn how to use the CLI to preview your environment variables.

On this page