Components

This section outlines the key components of the Uhuu platform and their roles in document automation.

Template

A template is a single-page web application, preferably built with React and Vite. Its purpose is to arrange content onto a print-friendly HTML page for quickly creating documents. During this process, Puppeteer is used to generate PDFs from the HTML templates.

Flowchart for exporting PDF documents:

Template Deployment

Template deployment refers to uploading templates to the Uhuu platform. There are two ways to do this:

1. Using vite-plugin-uhuu: This Vite plugin creates a uhuu.zip file by compressing the public dist folder, which can then be uploaded to Uhuu.
2. Using a deployment solution: Developers can deploy their templates using hosting services like Vercel, Netlify, or others.

Integration

Integrations are Uhuu's built-in API clients that handle HTTP requests to external APIs. The process works as follows:

1. Uhuu, acting as a client, sends a request to an external API.
2. The API processes the request and returns a response.
3. Uhuu binds the integration data to the template's base data, which is then used when creating documents.

Document Creation

When users create a document, they select a template and click “Create Document.” If the document requires integration data, Uhuu fetches this data based on the integration configuration (such as an ID provided by the user). Uhuu backend processes the data, injects it into the $uhuu global object, and provides it to the template as a payload.

Uhuu SDK

The Uhuu SDK defines a global $uhuu object that facilitates communication between the template and the Uhuu editor.

• Template Payload: This is a predefined JSON data structure used to exchange data between the template and the Uhuu editor. The template can access the payload with $uhuu.payload().
• Data Sync: The SDK emits events whenever the payload is updated by the Uhuu editor, allowing the template to re-render with the new data.

Example:

$uhuu.listen('payload', (data) => {
    // Handle updated payload
});

Uhuu Editor

Uhuu interactive editor designed to streamline content creation and customization. It provides a range of dialog options that make document personalization fast and intuitive, allowing users to modify templates by editing data directly within the editor.

Key Features of Uhuu Editor

• Interactive Dialogs: The Uhuu Editor offers various built-in dialogs to enhance document content:
• AI Copywriting: Generate or refine copy with AI assistance, making content creation faster and more efficient.
• Map Search: Easily find and insert nearby places, such as schools or restaurants, with map-based data integration.
• Spreadsheet Import: Import data from spreadsheets, view it in a table format, and integrate it directly into the document.
• Chart Creation: Visualize data by creating charts, enhancing the document with graphical representations.
• Image Cropping and Editing: Modify images with cropping tools to fit design specifications or layout requirements.
• Copy Editing: Adjust and personalize document text directly, providing control over content without leaving the editor.

Edit Documents

The Uhuu Editor facilitates document customization by handling real-time changes to template data, which is stored as a payload. Every interaction within a dialog updates the document’s data (payload), enabling dynamic re-rendering of the HTML template. Once finalized, the document can be exported as a PDF, capturing the user’s edits in a polished, static format.

With these interactive capabilities, the Uhuu Editor makes it easy for users to create tailored, professional documents directly from template data, adding value and flexibility to every document generated.

Editing Flow

Now we know that uhuu enables users to create PDF documents using templates with integration data and leveraging uhuu sdk communicating with uhuu editor, this data (payload) can be updated according to needs and used to create documents.

Uhuu Editor is an essential part of document creating since it isolates user editing interactions from templates.

The Uhuu Editor enables users to modify the data (payload) associated with HTML templates. The templates remain interactive, allowing users to update the content through the editor. Once the data has been modified, the updated HTML can then be used to generate PDFs during the export process.

• Edit Document: The document is the state of the template initialized with the custom data (payload). Users can modify this payload using Uhuu editor.
• Export to PDF: Once the data is updated, the HTML document is ready to be exported as a PDF using the latest version of the payload. The interaction remains in the HTML template, while the final export creates a PDF.

For the editable areas in a template, developers can define the data paths and which type of editing should be requested through uhuu sdk.

Example:

<div onClick={()=>$uhuu.editDialog({path: 'title'})}>{props.title}</div>

Uhuu editor receives the request, shows user interaction in a dialog and sends updated payload communicating with template using uhuu sdk.

When users save changes in the edit dialog, the uhuu editor merges the modifications into the existing payload and then emits new data using payload event.

$uhuu.listen('payload', (data) => {
    // Handle updated payload
    console.log(data.title); // Updated title from the editor
});