Overview

The Uhuu Playground is designed for creating and testing dynamic HTML templates that can be developed using any JavaScript framework (React, Vue, Angular, Mustache, or any other library). The goal is to provide a flexible environment where developers can focus on building templates while leveraging Uhuu's preloaded SDK to handle data binding and enrichment through the $uhuu global object.

Key Features

• Framework Agnostic: Use any single-page application (SPA) framework by loading it through a CDN.
• Dynamic Payload Handling: $uhuu.payload() provides the initial data payload, and $uhuu.listen listens for any updates, enabling real-time updates.
• Editor Integration: Uhuu's editor offers both form-based data editing and advanced dialogs for enriching data, making it easy to customize the payload.

Getting Started

1. Loading Your Framework via CDN

You can load any front-end framework via CDN to build your template. You can use any framework, or even plain vanilla JavaScript, to build your template logic.

2. Accessing the Payload

The Uhuu SDK comes preloaded with the $uhuu global object. You need to initialize your payload data from $uhuu.payload():

// Fetch the initial payload data
const initialPayload = $uhuu.payload();

// Example: Logging the initial payload
console.log("Initial Payload:", initialPayload);

The initialPayload contains all the data required for rendering your template.

3. Rendering Your Template

You can use your chosen framework to render the template using the data fetched from $uhuu.payload(). Here’s an example with plain JavaScript:

<div id="template-root"></div>
<script>
  const renderTemplate = (payload) => {
    document.getElementById('template-root').innerHTML = `
      <h1>${payload.title}</h1>
      <p>${payload.description}</p>
    `;
  };

  // Initialize with the initial payload
  const initialPayload = $uhuu.payload();
  renderTemplate(initialPayload);
</script>

4. Listening for Payload Changes

To listen for real-time changes to the payload, use $uhuu.listen. This ensures your template updates automatically when data is modified through Uhuu’s form editor or dialogs:

// Listen for changes in the payload
$uhuu.listen("payload", (updatedPayload) => {
  console.log("Payload updated:", updatedPayload);
  renderTemplate(updatedPayload); // Re-render the template with the updated data
});

5. Editing Data Using Uhuu's Editor

The Uhuu editor provides a form-based data editor and prebuilt dialog components for advanced data enrichment. Developers don’t need to worry about how the data is fetched or updated — Uhuu handles this internally.

For example:

• Form-based Editor: Users can directly modify text, numbers, dates, etc., from the editor.
• Dialog-based Editor: Developers can use advanced features such as geolocation for finding nearby places, markdown editing, etc.

Any change made through these editors will be automatically reflected in your template, thanks to $uhuu.listen.

Example: Building a Template

Here’s a complete example demonstrating how to build a template with Vanilla, Angular, React using Uhuu Playground:

Vanilla

<div id="vanilla-template-root"></div>

<script>
  // Function to render the template
  const renderTemplate = (payload) => {
    document.getElementById('vanilla-template-root').innerHTML = `
      <h1>${payload.title}</h1>
      <p>${payload.description}</p>
    `;
  };

  // Initial render with the payload
  const initialPayload = $uhuu.payload();
  renderTemplate(initialPayload);

  // Listen for changes and update the template
  $uhuu.listen("payload", (updatedPayload) => {
    renderTemplate(updatedPayload);
  });
</script>

React

<!-- Include React and ReactDOM via CDN -->
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<div id="react-template-root"></div>

<script type="text/javascript">
  const { useState, useEffect } = React;

  const UhuuTemplate = () => {
    const [payload, setPayload] = useState($uhuu.payload());

    // Listen for payload changes from the $uhuu editor
    useEffect(() => {
      $uhuu.listen("payload", (updatedPayload) => {
        setPayload(updatedPayload);
      });
    }, []);

    return React.createElement(
      'div',
      null,
      React.createElement('h1', null, payload.title),
      React.createElement('p', null, payload.description)
    );
  };

  ReactDOM.render(
    React.createElement(UhuuTemplate),
    document.getElementById('react-template-root')
  );
</script>

Vue

<!-- Include Vue via CDN -->
<script src="https://unpkg.com/vue@latest"></script>

<div id="vue-template-root"></div>

<script>
  // Create a Vue app
  const app = Vue.createApp({
    data() {
      return {
        payload: $uhuu.payload() // Initialize payload from $uhuu
      };
    },
    mounted() {
      // Listen for changes and update the payload
      $uhuu.listen("payload", (updatedPayload) => {
        this.payload = updatedPayload;
      });
    },
    template: `
      <div>
        <h1>{{ payload.title }}</h1>
        <p>{{ payload.description }}</p>
      </div>
    `
  });

  // Mount the Vue app to the DOM element
  app.mount('#vue-template-root');
</script>

Mustache

<!-- Include Mustache.js via CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mustache.min.js"></script>

<div id="mustache-template-root"></div>

<script>
  // The Mustache template
  const template = `
    <div>
      <h1>{{title}}</h1>
      <p>{{description}}</p>
    </div>
  `;

  // Function to render the template
  const renderTemplate = (payload) => {
    const rendered = Mustache.render(template, payload);
    document.getElementById('mustache-template-root').innerHTML = rendered;
  };

  // Initial render with the payload
  const initialPayload = $uhuu.payload();
  renderTemplate(initialPayload);

  // Listen for changes and update the template
  $uhuu.listen("payload", (updatedPayload) => {
    renderTemplate(updatedPayload);
  });
</script>

Angular

<!-- Include Angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<!-- Angular Application Root -->
<div ng-app="uhuuApp" ng-controller="TemplateController">
  <h1>{{payload.title}}</h1>
  <p>{{payload.description}}</p>
</div>

<script>
  // Define the AngularJS application
  const app = angular.module('uhuuApp', []);

  app.controller('TemplateController', ['$scope', function ($scope) {
    // Initialize the payload from $uhuu
    $scope.payload = $uhuu.payload();

    // Listen for changes to the payload
    $uhuu.listen("payload", (updatedPayload) => {
      $scope.$apply(() => {
        $scope.payload = updatedPayload;
      });
    });
  }]);
</script>

Tips for Creating Effective Templates

1. Use Framework-Specific Best Practices: If you are using frameworks like React or Vue, follow best practices for state management and component organization.
2. Leverage Uhuu’s Editor Capabilities: Make use of the form-based and dialog-based data editors in Uhuu to enrich your payload, allowing for more dynamic and powerful templates.
3. Use $uhuu.payload() Efficiently: Always initialize your data from $uhuu.payload() and listen for changes with $uhuu.listen to ensure your template remains in sync with data updates.

Conclusion

The Uhuu Playground provides a flexible, framework-agnostic environment for building and testing dynamic templates. By using the $uhuu SDK, developers can focus entirely on template creation without worrying about data management, thanks to real-time payload synchronization. Whether you use React, Vue, Angular, or vanilla JavaScript, you can build data-drivent templates efficiently.

Enjoy building with Uhuu, and unleash the full potential of your templating creativity! 🎨