PKL Integration Toolkit: Work in progress

Complete PKL configuration toolkit for Node.js, Next.js, and Vite applications with seamless integration.

🚀 Quick Start

Next.js

npm install @nexo-labs/nextjs-pkl-plugin

// next.config.js
const withPkl = require('@nexo-labs/nextjs-pkl-plugin');

module.exports = withPkl({
  // Your existing Next.js config
});

Vite

npm install @nexo-labs/vite-pkl-plugin

// vite.config.js
import { defineConfig } from 'vite';
import pklPlugin from '@nexo-labs/vite-pkl-plugin';

export default defineConfig({
  plugins: [pklPlugin()]
});

📦 Packages

Package	Description	Version
@nexo-labs/pkl	Main toolkit
@nexo-labs/nextjs-pkl-plugin	Next.js plugin
@nexo-labs/vite-pkl-plugin	Vite plugin
@nexo-labs/pkl-webpack-loader	Webpack loader
@nexo-labs/pkl-cli	Binary management
@nexo-labs/pkl-eval	Configuration evaluator
@nexo-labs/pkl-gen-ts	TypeScript generator

✨ Features

• ✅ Automatic File Processing: config.pkl → config-types.ts + config.json
• ✅ Framework Integration: Next.js, Vite, and Webpack support
• ✅ Hot Reload: Live updates when .pkl files change
• ✅ Zero Configuration: Just install and use
• ✅ TypeScript Support: Full type safety with generated definitions
• ✅ Cross-platform: Works on Windows, macOS, and Linux
• ✅ File Watching: Live updates during development

🛠 Usage

1. Basic Configuration

// config.pkl
appName = "My App"
version = "1.0.0"

server {
  host = "localhost"
  port = 3000
}

database {
  uri = "postgres://user:pass@localhost/db"
  maxConnections = 20
}

2. Generate Types & JSON

npx pkl-process config.pkl

Generates:

• config-types.ts - TypeScript definitions
• config.json - Compiled JSON

3. Use in Your App

import type { Config } from './config-types';
import { load } from '@nexo-labs/pkl';

// Load with full type safety
const config = await load<Config>('./config.pkl');
console.log(config.server.port); // TypeScript knows this is a number

🔥 Framework Integration

Next.js

// Direct import (with Next.js plugin)
import config from './config.pkl';
console.log(config.appName);

Vite

// Direct import (with Vite plugin)
import config from './config.pkl';
console.log(config.appName);

Webpack

// Direct import (with webpack loader)
import config from './config.pkl';
console.log(config.appName);

📖 Documentation

• Next.js Plugin
• Vite Plugin
• Webpack Loader
• API Reference

🎯 Roadmap

• Next.js plugin
• Vite plugin
• Webpack loader
• Increase integration with the JS/TS environment globaly, maybe someday

import file from "./version.pkl" with { type: "pkl" };

package.pkl
package-lock.pkl

📄 License

MIT

---

Built with ❤️ for the PKL community