Easily set up and integrate KhulnaSoft Visual CMS into your development workflow.
Supports Next.js, Remix, Vite, and Webpack with built-in CLI tools.

Khulnasoft Devtools revolutionizes your development workflow with powerful features designed to boost productivity and maintain consistency across your projects.

• Faster Development - Reduce development time with live previews and hot reloading
• Better Collaboration - Keep designers and developers in sync with Figma integration
• Improved Quality - Catch type errors early with TypeScript support
• Simplified Maintenance - Centralized component management
• Future-Proof - Works with all major frameworks and build tools

• Node.js 16.14.0 or later
• npm 7+ or pnpm 7+
• A modern web framework (Next.js, Remix, etc.)

You can install and initialize KhulnaSoft Devtools in just one command:

💡 The installer will:

• Detect your project type (Next.js, Remix, Vite, etc.)
• Install @khulnasoft.com/dev-tools and required dependencies
• Update your framework configuration automatically
• Set up the development environment

1. Start your development server:

   npm run dev

2. Open your browser to http://localhost:3000 (or your configured port)
3. Look for the Khulnasoft Devtools interface in your browser's developer tools

Khulnasoft Devtools is built around a modular, framework-agnostic architecture that provides a consistent development experience across different JavaScript frameworks.

// Core initialization example
import { createDevTools } from '@khulnasoft.com/dev-tools/core';

const devTools = await createDevTools({
  framework: 'auto', // Auto-detect framework
  componentDirs: ['src/components'],
  // ... other options
});

Key responsibilities:

• Framework detection and initialization
• Component registry management
• Build system integration
• Development server coordination
• Provides the main createDevTools factory function
• Handles framework detection and integration
• Manages the component registry and build configurations

• Next.js Adapter: Webpack plugin-based integration with Next.js
• Remix Adapter: Deep integration with Remix's build system
• Angular/Vue/Qwik: Framework-specific implementations

Tracks all components in the project with their metadata:

interface ComponentRegistry {
  components: ComponentInfo[];
  registryPath: string;
  registryDisplayPath: string;
  frameworks: Framework[];
  dependencies: AppDependency[];
  publicApiKey: string | undefined;
  devToolsVersion: string;
}

The devtools include a powerful development server that provides:

• Live Preview - Real-time component preview
• Hot Reloading - Instant feedback during development
• API Endpoints - For component management
• Figma Integration - Sync with design systems

• Injects development scripts
• Handles asset processing
• Provides source map support

• Integrates with Vite's development server
• Supports HMR (Hot Module Replacement)
• Handles environment variables

// Example: Basic setup with Next.js
import { createDevTools } from '@khulnasoft.com/dev-tools/core';

const devTools = await createDevTools({
  framework: 'next',
  // Additional options
});

// Advanced configuration example
const devTools = await createDevTools({
  framework: 'next',
  componentDirs: ['src/components'],
  publicApiKey: process.env.KHULNASOFT_PUBLIC_KEY,
  devServer: {
    port: 3001,
    open: true,
  },
});

Creates a new instance of Khulnasoft Devtools.

• framework: The target framework ('next', 'remix', 'vite', etc.)
• componentDirs: Array of directories to scan for components
• publicApiKey: Your Khulnasoft public API key
• devServer: Development server configuration

You can extend Khulnasoft Devtools by creating custom adapters. Here's a basic example:

import { DevToolsAdapter } from '@khulnasoft.com/dev-tools/core';

class MyCustomAdapter implements DevToolsAdapter {
  async getPublicApiKey() {
    // Your implementation here
    return { key: process.env.KHULNASOFT_API_KEY };
  }

  async setPublicApiKey({ key }) {
    // Your implementation here
    process.env.KHULNASOFT_API_KEY = key;
    return { key };
  }
  
  // Implement other required methods...
}

// Register your custom adapter
const devTools = await createDevTools({
  adapter: new MyCustomAdapter()
});

Khulnasoft Devtools provides seamless integration with Vite, offering features like HMR, environment variable handling, and automatic server management.

1. Install the Vite plugin:

   # Using npm
   npm install @khulnasoft.com/dev-tools/vite --save-dev
   
   # Using pnpm
   pnpm add @khulnasoft.com/dev-tools/vite -D

2. Add the plugin to your vite.config.js/ts:

   import { defineConfig } from 'vite';
   import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';
   
   export default defineConfig({
     plugins: [khulnasoftDevTools()]
   });

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';

export default defineConfig({
  plugins: [
    react(),
    khulnasoftDevTools({
      framework: 'next',
      componentDirs: [
        'src/components',
        'src/app/**/components',
        'src/features/**/components'
      ]
    })
  ]
});

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';

export default defineConfig({
  plugins: [
    vue(),
    khulnasoftDevTools({
      framework: 'vite',
      componentDirs: [
        'src/components',
        'src/views/**/components'
      ]
    })
  ]
});

// vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';

export default defineConfig(({ mode }) => {
  // Load env file based on `mode`
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [
      khulnasoftDevTools({
        // Pass environment variables to the devtools
        env: {
          API_URL: env.VITE_API_URL,
          ENABLE_ANALYTICS: env.VITE_ENABLE_ANALYTICS === 'true'
        }
      })
    ]
  };
});

// vite.config.ts
import { defineConfig } from 'vite';
import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';

export default defineConfig({
  plugins: [
    khulnasoftDevTools({
      // Custom WebSocket server configuration
      server: {
        host: 'localhost',
        port: 3001,
        // Enable HTTPS for secure connections
        https: process.env.NODE_ENV === 'production' ? {
          key: fs.readFileSync('path/to/key.pem'),
          cert: fs.readFileSync('path/to/cert.pem')
        } : false
      }
    })
  ]
});

Enable debug mode to get detailed logs:

// vite.config.ts
import { defineConfig } from 'vite';
import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';

export default defineConfig({
  plugins: [
    khulnasoftDevTools({
      debug: true, // Enable debug logging
      logger: {
        level: 'debug',
        // Custom logger implementation
        log: (message, level) => {
          if (level === 'error') console.error(`[Khulnasoft DevTools] ${message}`);
          else console.log(`[Khulnasoft DevTools] ${message}`);
        }
      }
    })
  ]
});

Configure Khulnasoft Devtools for testing with Vitest:

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';

export default defineConfig({
  plugins: [
    khulnasoftDevTools({
      // Disable auto-import in test environment
      autoImport: process.env.NODE_ENV !== 'test',
      // Mock API responses during tests
      mock: process.env.NODE_ENV === 'test'
    })
  ],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./test/setup.ts']
  }
});

// vite.config.ts
import { defineConfig } from 'vite';
import { khulnasoftDevTools } from '@khulnasoft.com/dev-tools/vite';

export default defineConfig(({ command, mode }) => {
  const isProduction = mode === 'production';
  
  return {
    plugins: [
      khulnasoftDevTools({
        // Disable devtools in production by default
        enabled: !isProduction,
        // Enable minimal production mode for performance
        production: isProduction ? {
          minify: true,
          analyzeBundle: true,
          sourcemap: false
        } : false
      })
    ],
    build: {
      minify: isProduction ? 'esbuild' : false,
      sourcemap: !isProduction
    }
  };
});

Khulnasoft Devtools comes with a powerful CLI for various development tasks:

# Start the development server
npx khulnasoft-dev-tools dev

# Build the project for production
npx khulnasoft-dev-tools build

# Preview the production build
npx khulnasoft-dev-tools preview

# Lint your code
npx khulnasoft-dev-tools lint

# Generate component documentation
npx khulnasoft-dev-tools docs

You can configure the CLI using a khulnasoft.config.js file in your project root:

// khulnasoft.config.js
export default {
  // Project configuration
  project: {
    name: 'my-awesome-app',
    type: 'vite', // 'vite' | 'next' | 'remix' | 'angular' | 'vue'
    port: 3000,   // Default port for dev server
  },
  
  // Vite-specific configuration
  vite: {
    // Custom Vite config overrides
    server: {
      open: true,
      port: 3000
    },
    // Additional Vite plugins
    plugins: []
  },
  
  // Component discovery
  components: {
    // Directories to scan for components
    dirs: ['src/components'],
    // File extensions to include
    extensions: ['tsx', 'jsx', 'vue', 'svelte'],
    // File patterns to exclude
    exclude: ['**/node_modules/**', '**/.git/**']
  },
  
  // Figma integration
  figma: {
    enabled: true,
    fileId: 'YOUR_FIGMA_FILE_ID',
    token: process.env.FIGMA_TOKEN
  }
};

Khulnasoft Devtools supports the following environment variables:

Add these scripts to your package.json for convenience:

{
  "scripts": {
    "dev": "khulnasoft-dev-tools dev",
    "build": "khulnasoft-dev-tools build",
    "preview": "khulnasoft-dev-tools preview",
    "lint": "khulnasoft-dev-tools lint",
    "docs": "khulnasoft-dev-tools docs"
  }
}

Then you can run them with:

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

• Getting Started Guide - Step-by-step setup instructions
• API Reference - Complete API documentation
• Guides & Tutorials - In-depth tutorials and best practices

• GitHub Discussions - Ask questions and share ideas
• Example Projects - Sample projects and integrations
• Changelog - Latest updates and release notes
• Report a Bug - Found an issue? Let us know!

We're thrilled you're interested in contributing to Khulnasoft Devtools! Here's how you can help:

Before creating a new issue:

1. Search existing issues to avoid duplicates
2. Include a clear, descriptive title
3. Provide detailed reproduction steps
4. Include environment details:
   • Node.js version
   • Operating System
   • Package manager (npm, pnpm, etc.)
   • Framework version (Next.js, Remix, etc.)
5. Add relevant code snippets or error messages
6. Include screenshots or screen recordings if applicable

1. Fork the repository
2. Clone your fork: git clone https://github.com/your-username/khulnasoft.com.git
3. Install dependencies: npm install
4. Create a new branch: git checkout -b feature/your-feature
5. Make your changes
6. Run tests: npm test
7. Commit your changes: git commit -am 'Add some feature'
8. Push to the branch: git push origin feature/your-feature
9. Create a Pull Request

• Follow the existing code style
• Use TypeScript for type safety
• Add tests for new features
• Update documentation as needed

• Write unit tests for new features
• Ensure all tests pass before submitting a PR
• Test across different frameworks and environments

MIT License

Copyright (c) 2023 KhulnaSoft

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more details, see the LICENSE file.