WP Block to HTMLConvert WordPress Blocks to HTML with Ease

🎉 v1.0.0 Stable Release Available ​

WP Block to HTML v1.0.0 is now live on NPM! Install it today and start building faster headless WordPress applications.

npm install wp-block-to-html

What is WP Block to HTML? ​

WP Block to HTML is a production-ready JavaScript library that converts WordPress block data into clean, framework-agnostic HTML. It bridges the gap between WordPress as a content management system and modern frontend applications built with frameworks like React, Vue, Next.js, or any other technology.

import { convertBlocks } from 'wp-block-to-html';

// WordPress blocks data
const blocks = [
  {
    blockName: 'core/paragraph',
    attrs: { content: 'Hello World', align: 'center' },
    innerBlocks: []
  }
];

// Convert to HTML
const html = convertBlocks(blocks);
console.log(html); // <p class="has-text-align-center">Hello World</p>

New in v1.0.0: Client-Side Hydration ​

The first stable release introduces powerful client-side hydration capabilities for SSR scenarios:

import { HydrationManager } from 'wp-block-to-html/hydration';

// Progressive hydration with multiple strategies
const hydrationManager = new HydrationManager({
  strategy: 'viewport', // viewport, interaction, idle, immediate
  rootSelector: '#app'
});

// Hydrate specific blocks
await hydrationManager.hydrateBlock('block-id-123');

// Batch hydration
await hydrationManager.hydrateAll();

Key Features ​

Framework Integration ​

Easily integrate with popular JavaScript frameworks:

// React Integration
import { createReactComponent } from 'wp-block-to-html/react';
const BlockComponent = createReactComponent(blocks, {
  cssFramework: 'tailwind',
  hydration: { strategy: 'viewport' }
});

// Vue Integration
import { createVueComponent } from 'wp-block-to-html/vue';
const BlockComponent = createVueComponent(blocks, {
  cssFramework: 'bootstrap',
  hydration: { strategy: 'interaction' }
});

CSS Framework Support ​

Generate HTML with classes from your preferred CSS framework:

// Using Tailwind CSS
const html = convertBlocks(blocks, {
  cssFramework: 'tailwind'
});

// Using Bootstrap
const html = convertBlocks(blocks, {
  cssFramework: 'bootstrap'
});

// Using custom class mappings
const html = convertBlocks(blocks, {
  cssFramework: 'custom',
  customClassMap
});

Server-Side Rendering Optimizations ​

Optimize your content for better performance metrics:

// Apply SSR optimizations
const html = convertBlocks(blocks, {
  ssrOptions: {
    enabled: true,
    optimizationLevel: 'maximum',
    lazyLoadMedia: true
  },
  hydration: {
    strategy: 'progressive',
    priorityBlocks: ['core/button', 'core/gallery']
  }
});

Why Use WP Block to HTML? ​

• Production Ready: v1.0.0 stable release with comprehensive testing and validation
• First-Class Hydration: Only WordPress block converter with client-side hydration support
• Headless WordPress: Build modern frontends while using WordPress as a CMS
• High Performance: 947 blocks/ms processing speed with 99% bundle size reduction
• Flexibility: Use any frontend technology while leveraging WordPress block editor
• Developer Experience: Clean, typed API with comprehensive documentation
• SEO: Improve Core Web Vitals and search engine rankings with optimized output
• TypeScript Support: Full TypeScript support with interfaces and type definitions

Performance Metrics ​

• Processing Speed: 947 blocks/ms (99.5% faster than target)
• Bundle Size: 99% reduction through modular architecture
• Test Coverage: 77 comprehensive tests passing
• Framework Support: React, Vue, Angular, Svelte ready
• Block Coverage: 100% WordPress core blocks supported

Documentation Highlights ​

• Getting Started Guide - Quick integration steps
• Client-Side Hydration - NEW! Progressive hydration strategies
• CSS Framework Integration - Using Tailwind, Bootstrap, or custom classes
• Framework Components - Integration with React, Vue, and more
• Server-Side Rendering - Performance optimization with SSR
• Performance Optimization - Techniques for optimal rendering speed
• Plugin Development - Extend the library with custom functionality
• TypeScript Support - Comprehensive type definitions

Installation & Quick Start ​

# Install the stable release
npm install wp-block-to-html

# Or using yarn
yarn add wp-block-to-html

# Or using pnpm
pnpm add wp-block-to-html

Community and Support ​

• GitHub Repository
• NPM Package
• Report Issues
• Contribute

From the Creator ​

License ​

WP Block to HTML is licensed under the MIT License.