Learn - Section: 2

Progressive tutorial. Start with Getting Started and work your way through each section

Building with Tag Functions

1. Basic Tags (5 min)

VanJS tag functions create real DOM elements. No virtual DOM, no JSX - just direct browser APIs.

const { div, span, p, h1, h2, h3, h4 } = van.tags;

// Create elements
div('This is a div');
span('This is a span');
p('This is a paragraph');
h1('This is a heading');

// Nest elements
div(
  h1('Welcome'),
  p('This is nested inside the div')
);

// Multiple children
div(
  h2('Features'),
  p('First paragraph'),
  p('Second paragraph'),
  span('A span element')
);

💡Important: Elements are created immediately - they're real DOM nodes, not virtual representations.

Available Tags

All HTML elements: div, span, p, h1-h6, a, img, ul, li, table, tr, td, input, button, form, label, select, option, textarea, etc.

2. Attributes (5 min)

Pass an object as the first argument to set attributes, classes, styles, and event handlers:

// Classes
div({ class: 'max-w-4xl mx-auto p-8' }, 'Styled container');

// ID
div({ id: 'main-content' }, 'Content');

// Inline styles (string format!)
div({ style: 'color: red; font-size: 20px;' }, 'Red text');

// Event handlers
button(
  {
    class: 'px-4 py-2 rounded',
    onclick: () => alert('Clicked!')
  },
  'Click Me'
);

// Multiple attributes
input({
  type: 'email',
  placeholder: 'you@example.com',
  required: true,
  oninput: (e) => console.log(e.target.value)
});

⚠️Warning: Use string format for inline styles in VanJS: style: "color: red;" NOT style: { color: "red" }

✅Best Practice: Prefer Tailwind classes over inline styles: class: "text-sunrise text-xl" is cleaner!

3. Composition (5 min)

Build complex UIs by composing simple functions. Extract reusable patterns into component functions:

// Reusable component pattern
const UserCard = (user) => {
  return div(
    { class: 'p-4 border rounded-lg' },
    h3({ class: 'font-bold' }, user.name),
    p({ class: 'text-smoke' }, user.email),
    p({ class: 'text-sm' }, user.bio)
  );
};

// Use it
export const component = () => {
  const users = [
    { name: 'Alice', email: 'alice@example.com', bio: 'Developer' },
    { name: 'Bob', email: 'bob@example.com', bio: 'Designer' }
  ];

  return div(
    { class: 'space-y-4' },
    h1('User List'),
    ...users.map(user => UserCard(user))
  );
};

✅Best Practice: Component functions are just JavaScript functions - no special lifecycle, no hooks complexity!

💡Important: Use the spread operator (...) to insert multiple elements from an array.

4. Lists & Iteration (5 min)

Use JavaScript map() to create lists of elements from data:

const { ul, li } = van.tags;

// Simple list
ul(
  li('First item'),
  li('Second item'),
  li('Third item')
);

// Dynamic list from array
const fruits = ['Apple', 'Banana', 'Orange'];

ul(
  { class: 'list-disc list-inside' },
  ...fruits.map(fruit => li(fruit))
);

// Complex list with components
const todos = [
  { id: 1, text: 'Learn VWF', done: false },
  { id: 2, text: 'Build app', done: false }
];

ul(
  ...todos.map(todo =>
    li(
      { class: todo.done ? 'line-through' : '' },
      todo.text
    )
  )
);

💡Important: Use ... spread operator to insert array items. Without it, you'll nest an array instead of elements!

🎯 DOM & Tags Checklist

✅Tag functions create real DOM elements
✅First argument = attributes object (optional)
✅Remaining arguments = children
✅Event handlers: onclick, oninput, onchange
✅Composition with functions
✅Lists with map() and spread (...)

Explore vwf

Discover what vwf can do