Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Drayman is a server-side component framework.

Docs · Blog · Changelog · Join Discord · X

Version GitHub Workflow Status (with event)

✨ Features

  • Drayman is designed to be easily installed and used to get your website up and running quickly.
  • Use any available HTML element, web component or custom Drayman third-party component together with server-side code in single script.
  • With Drayman, browser only renders what user should see - all logic and calculations happen server-side.

📸 Snapshot

Do you want to create a web application that, for example, allows the user to select a file from the file system and view it's contents? With Drayman it would be a single script:

import { promises as fs } from "fs";

export const component: DraymanComponent = async ({ forceUpdate }) => {
  const files = (await fs.readdir("./")).filter((x) => x.includes("."));
  let selectedFile;

  return async () => {
    return (
        <p>Select a file to view it directly from file system</p>
          onchange={async ({ value }) => {
            selectedFile = value;
            await forceUpdate();
          { => (
            <option value={fileName}>{fileName}</option>
        <br />
        {selectedFile && <pre>{await fs.readFile(selectedFile, "utf-8")}</pre>}