H5P Kit¶

A toolkit for creating, editing, and validating H5P quiz content. Includes a Go SDK for server-side operations and a TypeScript Editor for browser-based quiz editing.

Component	Language	Package
Go SDK	Go	`github.com/grokify/h5pkit`
Quiz Editor	TypeScript	`@grokify/h5p-editor`

Go SDK Features¶

Full H5P Package Support: Create and extract .h5p ZIP files with proper structure
Type-Safe Schema Implementation: Official H5P MultiChoice schema with Go structs
Question Set Builder: Fluent API for building interactive question sets
Validation: Built-in validation for H5P compliance
Multiple Question Types: Support for single-answer and multi-answer questions
Official Schema Compliance: Uses actual H5P semantics definitions
JSON Serialization: Full marshaling/unmarshaling support
Extensions Support: Vendor-specific metadata with h5pGo namespace (v0.4.0+)

TypeScript Editor Features¶

Visual Quiz Editor: React component for browser-based quiz creation
Multiple Question Types: Multiple Choice, True/False, Fill in the Blanks
Undo/Redo: Full history support for editing operations
Validation: Real-time validation with detailed error messages
Theming: Light and dark mode with CSS custom properties
Dual API: React component or vanilla JS via CDN

Quick Start¶

Go SDKTypeScript (React)TypeScript (CDN)

go get github.com/grokify/h5pkit

package main

import (
    "fmt"
    "log"

    "github.com/grokify/h5pkit"
)

func main() {
    builder := h5p.NewQuestionSetBuilder()

    answers := []h5p.Answer{
        h5p.CreateAnswer("Paris", true),
        h5p.CreateAnswer("London", false),
        h5p.CreateAnswer("Berlin", false),
    }

    questionSet, err := builder.
        SetTitle("Geography Quiz").
        SetPassPercentage(60).
        AddMultipleChoiceQuestion("What is the capital of France?", answers).
        Build()

    if err != nil {
        log.Fatal(err)
    }

    jsonData, _ := questionSet.ToJSON()
    fmt.Println(string(jsonData))
}

pnpm add @grokify/h5p-editor react react-dom

import { QuizEditor, H5PQuiz } from '@grokify/h5p-editor';
import '@grokify/h5p-editor/styles.css';

function App() {
  const handleSave = (quiz: H5PQuiz) => {
    console.log('Quiz:', quiz);
  };

  return <QuizEditor onSave={handleSave} />;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@grokify/h5p-editor/dist/h5p-editor.css">
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@grokify/h5p-editor/dist/h5p-editor.umd.cjs"></script>

<div id="editor"></div>
<script>
  const editor = H5PEditor.createQuizEditor('#editor', {
    onSave: (quiz) => console.log(quiz)
  });
</script>

What's New in v0.5.0¶

This release renames the project from h5p-go to h5pkit and introduces a TypeScript Quiz Editor for browser-based editing.

Module Rename¶

// Before
import "github.com/grokify/h5p-go"

// After
import "github.com/grokify/h5pkit"

TypeScript Quiz Editor¶

import { QuizEditor } from '@grokify/h5p-editor';
import '@grokify/h5p-editor/styles.css';

<QuizEditor onSave={(quiz) => console.log(quiz)} />

See the v0.5.0 release notes for the full migration guide.

What's Next?¶

TypeScript Editor¶

Editor Overview - Introduction to the quiz editor
Installation - npm/pnpm and CDN setup
React Usage - Component props and ref API
Vanilla JS - CDN usage without React build
API Reference - Types and functions

Go SDK¶

Installation Guide - Detailed installation instructions
Quick Start Tutorial - Step-by-step tutorial
Basic Concepts - Understanding H5P and this library
User Guide - Comprehensive usage documentation
API Reference - Complete API documentation
Examples - Real-world usage examples
Release Notes - Version history and changes

🏛️ Architecture¶

The H5P Go SDK is organized into several key components:

Core Types (questionset.go, h5p_package.go) - Fundamental data structures
Extensions (extensions.go) - Vendor-specific metadata support
Builder Pattern (builder.go) - Fluent API for creating content
Official Schemas (schemas/) - Type-safe H5P content type definitions
Semantics Engine (semantics/) - Universal H5P semantics format support
Package Management - Full .h5p file creation and extraction

🔧 Key Capabilities¶

Question Sets¶

Build interactive question sets with multiple question types, scoring, and rich feedback systems.

Type-Safe Schemas¶

Work with official H5P content type schemas using strongly-typed Go structs.

H5P Package Management¶

Create, modify, and validate complete H5P packages ready for deployment.

Standards Compliance¶

Full compliance with official H5P specifications and content type definitions.

🤝 Contributing¶

We welcome contributions! See our Contributing Guide for details.

📜 License¶

This project is licensed under the MIT License - see the LICENSE file for details.