vwf .

Development Tools

Interactive tools and utilities to speed up learning, development and testing

⚡ Code Playground

Interactive code editor for testing VWF components in real-time.

Features

  • • Live code editor with syntax highlighting
  • • Real-time component preview
  • • VanJS and VWF components available
  • • Error handling and debugging

Use Cases

  • • Test component variations
  • • Experiment with props and styling
  • • Learn VanJS patterns
  • • Prototype UI components

Example Code

import { Button } from './shared-components/forms/Button.js';

export const component = () => {
  return Button({
    class: 'vwfcolor-sky solid vwfsize-lg',
    onclick: () => alert('Hello VWF!')
  }, 'Click Me');
};

✓ Form Validation Tools

Built-in validators for common form inputs using validator.js library.

Available Validators

  • • Email validation
  • • Phone number validation
  • • URL validation
  • • Password strength
  • • Required field checks
  • • Min/max length
  • • Pattern matching (regex)

Usage Example

import validator from 'validator';

// Email validation
const isValid = validator.isEmail(email.val);

// With custom messages
if (!validator.isEmail(email.val)) {
  inputMsg.val = {
    code: 'error',
    detail: 'Please enter valid email'
  };
}

🔧 Utility Functions

Helper functions for common development tasks.

Component Utilities

  • • parseArgs() - Flexible component arguments
  • • cx() - Conditional class names
  • • filterClassName() - Tailwind conflict resolution
  • • val() - Create reactive values

Navigation Utilities

  • • router.navigate() - Programmatic navigation
  • • router.back() - Browser back
  • • Link() - Client-side routing link
  • • Route params extraction

Utility Examples

// parseArgs - flexible component API
const [props, children] = parseArgs(args);

// cx - conditional classes
const classes = cx(
  'base-class',
  isActive && 'active-class',
  'utility-class'
);

// router - navigation
router.navigate('/reference/api');

// val - reactive state shorthand
const count = val(0);
count.val++; // Update value

🚀 Development Workflow

Recommended tools and practices for VWF development.

Build Tools

  • • Vite - Fast dev server and bundler
  • • Tailwind CSS 4.1 - Utility-first CSS
  • • npm scripts for dev/prod
  • • Hot module replacement (HMR)

Testing & QA

  • • Browser DevTools for debugging
  • • Lighthouse for performance
  • • Mobile device testing
  • • Accessibility checks (ARIA)

Explore vwf

Discover what vwf can do