Embed Proposal

Brian Takita
Authors:Brian Takita
Posted on:May 24, 2024

Proposal to embed prescience.ai into client websites.

Embedding Prescience.ai into Websites

Browser JS API

The JS API to load into the website. The website admin copies the HTML from the Website Admin Panel to paste into the site.

Web Component

Embed the Survey & Prompt UI as a web component. This web component is loaded as an HTML tag with a Javascript loader function. It may look something like:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]">

<prescience-ai location="bottom-right"></prescience-ai>

<script type="module">
  import PrescienceAI from '@prescience-ai'
  PrescienceAI.load({ apikey: 'SOMEKEY' })
</script>

See Update Website.

Configuring & interacting with the web component includes:

  • html attributes
  • custom DOM events
  • reactive cells/signals
  • loader function

To configure & interact with the component. Functionality includes:

Survey + Prompt Context from Website & Private Content

The Private LLM + Retrieval Augmented Generation (RAG) drives the context for the GPT Survey & Prompts.

Website Identification

To associate the Web Component instance & Data API with the private context from Prescience.ai. There are two approaches for authentication:

Token-Based Authentication

The most secure form of authentication is from the website Web Server. This allows Token-Based Authentication. Which prevents spoofing. A private API Key would be used to obtain the request Token. The Token can have a short lifetime (~1 hour) to authenticate Prescience.ai requests while the visitor is on the webpage.

Token-Based Authentication requires the Website to use Server Side logic. Which requires a web server or web service. And would not work with static-only HTML pages.

Browser API Key with CORS

A Browser API Key can be used with static-only HTML pages. Which is not possible with Token-Based Authentication. A Browser API Key is less secure than Token-Based Authentication. A Browser API Key can be copied by an attacker. With that in mind, some strategies could mitigate this:

CORS

Identifies the production hostname & URL. CORS enables the Prescience.ai API to associate a hostname and/or URL with an account. Note that the domain name can be spoofed in the HTTP request or in /etc/hosts. This means the Web Component for a website can be used outside of its intended usage. See Detecting Abuse.

Disincentivize Unauthorized Usage

Prevent Off-Topic Prompts to remove incentives for using the Website's Private LLM. Not answering off-topic prompts to disincentivize unauthorized usage.

Monitor Traffic

Suspicious Traffic can be studied, flagged, & rejected.

Change API Key

Regularly changing the API Key requires work for the website admins & attackers spoofing requests. Changing API Keys may assist in Monitoring Traffic. As attackers may not check if a key has changed. Providing insight into patterns of unauthorized use.

Cookies

Cookies track browser sessions. A hidden iframe is useful to Track Browser Sessions with Cookies. Since the hidden iframe can use cookies targeting the prescience.ai domain.

iframe

Optional iframe implementation which can support older browsers that do not support Web Components. Such as IE11. Uses postMessage to communicate with the Javascript code on the host page.

Data API

The Web Component uses the Data API. The Data API is useful for:

  • custom components
  • deep integration into the webpage model

IOS SDK

SDK for native IOS apps.

Android SDK

SDK for native Android apps.

Private LLM + Retrieval Augmented Generation (RAG)

RAG Flow The website content is converted to Vector Embeddings. To add context for the Surveys & Prompts.

Data

The Website content.

Vector Embeddings or Graph Data

Depending on whether the storage is a Vector Database or a Graph Database:

Vector Database Storage

Vector Embedding would be stored.

Graph Database Storage

Graph Data would be stored. The Graph Data can be converted to Vector Embeddings using an algorithm like node2vec.

Vector or Graph Database

Depending on the trade-offs, Vector or Graph Databases are commonly used.

Vector Database

Graph Database

Note that the website content will be stored as nodes in the graph database. node2vec would encode the retrieval step as a collection of embeddings to send to the LLM.

Retrieval

A prompt query by survey question answers or free-form prompts initiates Retrieval. Retrieval involves:

  • querying the database
  • formatting the response as vector embeddings

Synthesis

An upstream LLM answers the contextualized prompt. This can be either a Foundation Model or an Upstream RAG. A single or multiple upstream LLMs may be synthesized.

Foundation Models

A foundational GPT model such as:

  • ChatGPT
  • Gemini
  • Llama
  • Anthropic Claude
  • Amazon Titan

Upstream RAGs

  • Perlexity

Evaluation

The system evaluates the response from the Foundation LLM to ensure:

  • accuracy
  • context
  • format
  • protocol
  • staying on topic
  • security
  • adherence to terms & conditions

Output

The output text & media from the LLM output + evaluation.

Crawler Service

Crawl a website to store contextual embeddings for a website. Inputs drive the crawler:

sitemap.xml

The Sitemap can create seed pages for the crawler on the site.

Webpage URLs

The URLs can be seeds for the crawler. Parsing & following links.

Semantic Data

Semantic data can be extracted from web pages. This semantic data provides typed & linked data to be included in the GPT context. This could be useful for the site's private GPT and/or setting context on an upstream GPT.

JSON-LD

JSON-LD with schemas from schema.org & other schemas. It is useful for a website to express the semantic structure of the content.

RDFa

RDFa or Resource Description Framework in Attributes.

Microdata

Microdata is part of the WHATWG HTML Standard and is used to nest metadata within existing content on web pages.

Meta's Object Graph

The Open Graph protocol enables any web page to become a rich object in a social graph.

Example
<meta property="og:title" content="My Page">

X's (Twitter) Cards

With Twitter Cards, you can attach rich photos, videos, & media experiences to Tweets, helping to drive traffic to your website.

Example
<meta name="twitter:card" content="summary">

Private Documents

Private Documents can be uploaded for additional context. In formats such as:

  • pdf
  • docx
  • txt
  • md

Benefits to Prescience

Integrate with Existing Websites

New Markets

Embedding prescience.ai into existing websites opens new markets for prescience.ai. In a win-win collaboration partnership between:

  • the website owner
  • website content creators
  • the website audience
  • the website programmer
  • prescience.ai

Funnel to prescience.ai

From visiting website

The Web Component will have a link back to prescience.ai.

Visitor Traffic

A website visitor clicks on the backlink to prescience.ai.

The component's content is crawled by Search Engines. Including Google & Bing.

Website Authority

The backlinks to prescience.ai will be augmented by the Authority of the website & page with the component.

Telemetry

Gain insight into user actions.

User Profile

Store User Preferences & selection history. To add context for AI search.

Visitor Transparency

Making this process transparent to the audience allows visitors to view & control what is added to the context. This includes:

Viewing Context

Prescience.ai has a view of survey questions & answers used to generate context. A similar interface can be used to show the visitor's preferences & actions taken.

Resetting Context

Allows visitors to clear their context. Or have a "clean slate".

Select Context from History

The visitor can select a Context from History. It will be useful for websites with vast amounts of content.

Admin/Site Owner Transparency
Stats to Derive the Intention of the Visitor

Stats on actions taken, questions answered, & semantic prompts are valuable insights about:

  • the visitor
  • the visitor's goals
  • whether the visitor found success in the funnel
  • what funnels to present to visitors based on survey answers
  • presenting facts to the website authors when writing content
Admins Can Impersonate Context

Website Owners & Admins can Impersonate the context. Giving them a view into what a site visitor sees. Useful for testing the Survey & Prompt flow.

A/B Testing

Prescience.ai can conduct A/B testing on UX/UI flows. Evolution is driven by key metrics.

User Feedback

Users can send feedback about their interaction with Prescience.ai web components. A button to provide feedback can set the UI context to the User Feedback Context:

Feedback Survey

Questions about the type of User Feedback. The website admin can influence the content of the survey. These questions can be subject to deep learning. Form inputs include:

Contact Data

The website visitor can optionally enter their contact data. To correspond with the feedback. For example, the website or prescience.ai staff have an answer to the feedback.

Single-select

Option with a single selection.

Multi-select

Options with multiple selections

Free Form Answers

The website visitor can enter free-form text.

User Prompt for Additional Feedback & Questions

Useful for people to learn more about the platform. Potentially finding an answer or explanation to the subject of the feedback.

Review by Website Admins and/or Prescience.ai Staff

Website Admins and/or Prescience.ai staff can review the results of the Feedback Survey.

Contact Data

If the visitor leaves their Contact Data, then correspondence can occur.

Quantitative Feedback

Feedback from selection answers, sentiment analysis, & vector embeddings.

Qualitative Feedback

Evaluation of the context & answers can provide ideas for product development & bug fixes.

Add on Services

CMS Tools to Author Content

Prescience.ai can develop tooling to create blog posts & article content. Based on the AI survey & prompting to build context & generate content. With tooling, website admins can:

Curate & Synthesize Content

The curated content can be placed in an SEO-friendly template, that includes:

Semantic HTML

Structure tags such as:

  • header tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • definition list: <dl>, <dt>, <dd>

Along with Semantic Data such as:

  • head tags: <title>, <meta>
  • JSON-LD: <script type="application/ld+json">
Semantic Chunking for Vector Embeddings

The documents have structure & can be represented as nodes of a graph. Applying node2vec converts the nodes to Vector Embeddings. Providing the opportunity to optimize the efficacy of the Vector Embeddings.

Document Hierarchy

The content structure of each document is in a document hierarchy.

Content Editing Tools

Context can drive data in content editing tools. The context can be driven by:

  • website content
  • private content
  • audience interactions with the LLM
Iterative Workflow

The Content Editing Tools form the foundation for an iterative workflow. Iteration is informed by updates to:

  • website + private content
  • subsequent website crawls
  • website visitor actions

Iterating on the context can:

  • increase productivity & effectiveness of writing posts/articles that rank on SERP & are referenced in GPT prompt responses
  • increase traffic & authority to the website
  • increase authority to prescience.ai via the Web Component backlink
Evergreen Content

The content can be updated to reflect the contemporary cultural context. This update signals the Search Engines to be re-crawled as fresh content. Maintaining and/or increasing the page's SERP ranking. And relevance with upstream LLMs.

Track LLM Query Result Signal

An article can be associated with a LLM Query. The embedded prescience.ai system can track the results of the query from LLMs. If the LLM result changes in a meaningful way, the website authors can be notified. To review & update the article. Contributing to Evergreen Content.

Manage References

Database to collect references along with claims and/or quotes from referenced material. This can be useful to collect referenced claims using the Survey + Prompt tools. Then synthesize these claims into the article.

The website authors are domain experts & can add additional references. The website authors can curate references. Removing:

  • references to competitors
  • off-topic references
  • invalid references
  • hallucinations
SEO Services

Prescience.ai can use existing SEO services to resell integrated SEO services within the CMS tools. This can be an inexpensive alternative to other SEO Services. This can include:

Keyword Research

Data sourced from Google, Bing, & other providers.

Technical SEO

The CMS Tools generate articles that have good Technical SEO practices. Ensuring efficiency in crawling & semantic processing.

Partnership Services

Having an embedding Web Component & private context. Allows unique context for partner, business, & social networks.

Integrate with Website Collectives

The scope of this document assumes a single website. However, multiple websites can add a hierarchy of context behind the primary website context. Types of website collectives include:

Web Network Collaboration

This refers to a partnership between multiple independent websites to collaborate & share resources. It could also include:

  • sharing audiences
  • cross-promotion of content
  • shared ad networks
  • joint ventures
Digital Consortium

A consortium is an association of two or more organizations. To participate in a common activity or pool their resources. To achieve a common goal. In a digital consortium, this common activity could be the:

  • operation
  • maintenance
  • development

Of their respective websites.

Internet Alliance or Partnership

An alliance or partnership could mean partnering with another organization. To:

  • boost market reach
  • share resources
  • contribute to each other's growth
  • leverage each other's strengths
Online Syndicate

A syndicate refers to a group of individuals or businesses that come together. To manage, organize, or carry out a particular project or business operation.

This could be in the aim of sharing:

  • resources
  • technology
  • audiences
E-Commerce Federation

In the context of an e-commerce business. Becoming part of a federation would mean joining a group of independent online retailers. Collaborating under a united brand or entity. For greater market penetration & resource optimization.

Web Franchise

A web franchise might involve operating an online business under someone else’s established brand. Following their business model carefully & paying them a part of your profit or a regular fee.

Access to Websites

If Prescience.ai has a large pool of websites using its embedded web components. It will be an attractive opportunity for partners to access this "market" with their products. As an add-on upgrade.

Embedding Targets

3rd Party Sites

Prescience.ai components can be added to a website as a Web Component. Training on a website's content. This is particularly useful for sites with:

Expert Written Content

Such as a Medical website

User Generated Content

Such as a Social Network

Chatroulette

The User Generated Content can train the Private LLM to connect people in profound & satisfactory ways. Enabling context, goals, & preferences to be part of the search.

Chatroulette Feedback + Support

The website admin can influence the Feedback Survey design. Chatroulette may have some particular types of feedback & support. Driven with the AI Survey + Prompt. The context of the Chatroulette user's preferences may factor into the feedback + support.

Nillion

Nillion decentralizes trust for sensitive data in the same way that blockchains decentralized transactions.

We're in the midst of a data renaissance. Emerging ecosystems like personalized AI, decentralized trading and identity risk the safety, power and control of important data by entrusting it to one entity.

The Nillion thesis: Decentralized, private data will be the backbone of tomorrow's biggest industries - opening up a vast white space of web3 use cases and verticals.

Context for Embedded Web Components

The Nillion platform can provide context for the embedded web components.

Contribute to Nillion Knowledge Graph

Prescience.ai integration can also enable the website to contribute its knowledge base to the Nillion platform. Enabling site authors to participate within the Nillion economy.

Multiple Rewards for Effort

The CMS tooling benefits SEO. The CMS tooling also provides entry into Nillion's knowledge graph. Allowing the content to provide value in multiple channels.

Service Plans

A range of service plans can be provided. These example plans have a free & pair tier.

Website Owner Plans

Free Tier

The Website's content is crawled to form a private context. For example, Ahrefs offers a crawl for entire sites to provide basic SEO analysis. Tooling is limited. With visible buttons for features available in Pro mode. Opening a dialog to upgrade to the Pay Tier.

Pay Tier

All of the tooling is available.

Website Visitor Plans

The Website Visitor has their own set of plans.

Free Tier

All "off-topic" restrictions are in place.

Pay Tier

The "off-topic" restrictions are removed. This enables the paying visitor to access unrestricted answers. Using the website's context. The paying visitor can "subscribe" to the website's context to use when visiting Prescience.ai.

Prescience.ai Accounts

Prescience.ai Accounts can use the crawler to gain limited context on any website. A RAG can use a webpage or collection of webpages as vector embeddings.

Free Tier

Limit the context to a single URL.

Pay Tier

The context can include multiple URLs. From a provided sitemap.xml or given URLs.

Robots.txt, Meta Tags, & Declarations of No AI Bots

Should NOFOLLOW directives be honored? Whether in robots.txt or an approach that directly addresses AI. There are arguments for both. Intent is an important factor to figure out:

Honor NOFOLLOW

The website author intends to not have robots follow the links. The intent of the NOFOLLOW may be regarding:

NOFOLLOW for SEO

The intent may be related to SEO. For example, there may be old content or content that is not intended to be in SERPs. However, the content is still on the website. Meaning it's intended to be read by the public.

NOFOLLOW for AI Bots

Some content writers do not want AI to index their content. Due to their ethical stance and/or preserving their market position. Further discussion is needed.

Ignore NOFOLLOW

The prescience.ai user intends to summarize the content of the website. Ultimately leading to the visitor gaining insight on the content of the website.

Costs

Additional usage from visitors increases costs.

Computing Costs

  • Computational resources needed to run the private GPTs
  • Hosting costs

API Costs

API Costs from loading with upstream LLMs such as ChatGPT.

Risks

Computing & API Costs

Computing & API Costs from traffic increase the budget. Large traffic spikes will spike costs. Embedding in a large number of websites will increase the probability of traffic spikes.

Unauthorized Usage

Some visitors may "free-load" off of the AI. Rate limiting, Prevent Off-Topic Prompts, & other security measures may help mitigate this issue.

Spoofing Browser API Key + CORS

Spoofing the Browser API Key while spoofing CORS leads to unauthorized usage.

Website Admin Flow

Admin Flow

Website Admin

The Admin of the website.

Prove Website Ownership

Access to update the website is required to embed the Component HTML. This would prevent people who don't have access to update the website from creating a component.

  • Using a DNS TXT entry or <meta> tag.

admin.prescience.ai

Website Admin login to admin.prescience.ai

Website Admin Panel

Control panel for a Website Admin.

Manage Website Crawling

Content Seeding for the website's Private LLM.

Add sitemap.xml/page URLs

Seed crawler URLs with the sitemap.xml or webpage URLs.

Start Crawl

Manually start a prescience.ai crawl of the website. Re-crawling can occur periodically.

Crawl History

A history of the crawl results. See Google Search Console or ahrefs as an example.

Survey Design Dialog

The website admin can test & design the survey questions presented to the website visitors.

Edit Survey Questions

The website admin can see the tree data structure UI of the Survey. And be presented with a UI of each step in the survey. A node can have an editable:

  • values
  • child nodes
  • position
Test Survey

The website admin can test the survey. Impersonating the website visitor when going through the survey.

The website admin can add links to common CTA actions such as:

  • Sign Up
  • Contact Us

Site CMS

The website staff can author content for the website. The Private LLM can provide additional context with upstream LLMs, such as ChatGPT. A fresh context using Prescience.ai's survey can create the context to generate new content.

Write Articles

The articles can use an SEO-friendly template. For example, this document uses h tags & <dl><dt><dd> tags. A good UI is essential for a productive authoring environment.

Generate Content Using LLMs

The prescience.ai Survey + Prompt workflow can generate content for the website.

Synthesize Content

UI to copy & edit generated content. Adding content to the article. This includes additional tooling to edit the article to improve the quality of the content. This can include:

  • grammar checks
  • ease of reading
  • integrate with other writing tools
    • copy/paste HTML
    • copy/paste markdown
    • copy/paste rtf
References

Some LLMs generate references. These references:

  • Ensure the accuracy of the content
  • Add credibility to the content
  • Show research ideas for more content
Visitor Telemetry & Feedback

The telemetry stats & feedback are visible when editing a published article. This can help the writer to make content to satisfy the intent of visitors.

SEO

The website context can power tools that increase SEO.

Generate JSON-LD

JSON-LD for entities in the site & written articles. Takes the context into account. Editable by website admin.

Configuration

Configure account & website settings about prescience.ai.

Correspondence Email

Website support email address. To send Feedback Dialog correspondence.

Correspondence SMS

Website support SMS (text message) number. To send Feedback Dialog Correspondence.

Documentation

Documentation of:

  • the available features
  • the Javascript API & the Component API
  • tips, patterns, & blog posts

Copy Embed Component HTML

The website admins copy the Embed HTML.

Update Website

The copied Embed HTML is then pasted into the website to embed the web component. See Web Component.

Website Visitor Flow

Visitor Flow

Visitor

Visitor Opens Web Component. The Web Component can either be rendered:

  • inline the page
  • a handle button that opens a dialog

Web Component

AI

The prescience.ai AI app flow. It includes the Survey & AI Prompt.

Initial Survey

The survey is trained on the existing website's content, private content, & configuration. See the Website Admin Flow.

  • Survey questions
  • Skip survey option?
  • A prompt input text box, which effectively skips the survey
Fill out Survey

Filling out the survey sets a custom context for the prompt.

Survey Design
  • This survey is generated & designed from site content set in the Website Admin Flow
  • The Survey has Telemetry (See Visitor Telemetry & Feedback)
    • Helps the Website Admin to measure the effectiveness of the Survey Design
    • Website Admin can:
      • Make adjustments to the Survey Design
      • Author additional content
      • Make prescience.ai re-crawl the Website
Skip Survey

Go straight to the Prompt with the current Context.

AI Prompt

Free form prompt to achieve a goal within the website. The base Website Context is configured in the Website Admin Flow. Common tasks include:

Visitors can search the content of the website. This may include custom context from previous steps & the survey.

Autocomplete Words & Phrases

Similar to how conventional search engines autocomplete words & phrases. Which act on the typed-in text to:

  • show available words in the domain giving an interactive search of domain concepts
  • make search more efficient
Iterate on Context

Visitors can use prompts to add to the context.

Reset Context

If the prompt is not giving satisfactory answers. Reset the prompt.

CTA Button

The result of a Prompt can show a CTA Button. Such as Sign Up or Contact Us. Clicking the button will redirect to a URL on the website. This URL is configured in the Website Admin Flow.

Show links to pages that match the context & request. Use a meta description of each page in the search result.

Feedback Dialog

Dialog to provide feedback about the Web Component Experience & connecting with website services.

Correspondence

This can include getting contact info within the dialog. Such as Email or Phone Number. This is different from the Contact CTA configured in the Website Admin Flow. As correspondence may involve prescience.ai staff (copying the website admin). See Correspondence Email.

Thank you for your Feedback

Thank you prompt for completing the Feedback Dialog flow. This can include the next steps.

Website

The website that the Web Component will be integrated into. Using the Website Admin Flow. It is crawled by precsience.ai to generate a private GPT. The LLM can be used for the website staff to author posts/articles. With SEO & iterating on the Website LLM Context.

UI Notes

Survey Prompt Bot

Position

Defaults to the lower right corner. Configurable.

Talking to AI or Human

Indicator whether a person is talking to an AI or a Human

AI

Indicates that the visitor is chatting with an AI. Using a Private Model based on website data. Optionally backed by a GPT such as ChatGPT.

Human

This would occur in an integration that supports humans communicating with each other. Examples include:

  • technical support
  • sales
  • p2p chat

Architecture

Architecture Requirements

Performance

To reduce as much overhead to the host website as possible. Use tools to achieve high performance & low latency.

SEO

The web component should assist in generating SEO content. Such as JSON-LD & summaries of the site's content. Allowing for Semantic & Keyword targeting.

Website Customization API + Hooks

A website's admin may wish to customize the embedded web components. An API to provide customizations should be included.

3rd Party Software API + Hooks

A large embedded audience will make prescience.ai an attractive target for partnership & 3rd party developers. The software architecture should provide hooks for interoperability.

Vector and/or Graph Database

To store website content embeddings. And to perform queries on the website content embeddings.

Security

Website Ownership

Some form of proof that the website is owned by the admin. Typically, a DNS TXT record or a <meta> demonstrates proof of ownership.

Rate Limiting

Each requesting IP address can be rate-limited. A session cookie could be added to allow multiple requests coming from the same IP address.

Authorization

Access to enhanced queries can be made with a prescience.ai account. When the visitor is logged in to prescience.ai.

Preventing Abuse

The Browser API Key has some security risks. The Web Components usage domain name can be spoofed. Some strategies to mitigate include:

Encourage Token-Based Authentication

Token-Based Authentication secures against request spoofing by design. A compromised token is limited to its lifetime (~1 hour). Token-Based Authentication has the same analysis benefits as the Change Browser API Key step.

IP Rate Limiting

Requests by an IP Address can be rate-limited.

Request Log Analysis

Anomalies can be detected in the request logs. These anomalies can be investigated & blocked. This includes frequent violations of IP Rate Limiting.

Prevent Off-Topic Prompts

The Evaluation Step can prevent Prompts that are not related to the Website's content. This disincentivizes unauthorized usage by limiting the scope of the prompts. If the website visitor has a prescience.ai account, the off-topic prompt restriction can be removed.

Change Browser API Key

Changing the Browser API Key can detect unauthorized usage. After the website admin changes the API Key, any usage of an old key is suspicious. These requests can be investigated & blocked.

Track Browser Sessions with Cookies

Website Visitor browser sessions can be tracked using cookies. The cookies can be set & analyzed with a hidden iframe that requests the prescience.ai domain. The iframe can receive the Token or Browser API Key as a URL query param or using postMessage.

Services/Servers

Here are some suggested requirements for the Services/Servers.

Web Server/Routing

Rate Limiting & other security measures.

Application Server

A standard web server can be used. Web Socket streaming would be preferred.

Small Asset Sizes

Reducing the packaged Javascript, CSS, & Images keeps the web component asset payload small & the performance high.

Web Component Solutions

Web Component Server Side

The server-side architecture ought to have an optimal solution for the Architecture Requirements.

<template> Tags

A strategy to reduce Javascript sent to the browser. Is to use <template> tags. The <template> contains DOM Elements to call <template>.content.cloneNode(true) DOM on the Browser Side.

Web Component Browser Side

Vanilla Javascript & Small libraries are preferred.

<template>.content.cloneNode(true)

The rendering of the template nodes can occur on the server-side. This removes the need to send rendering & component Hydration Javascript to the browser. Instead, the elements are hydrated using <template>.content.cloneNode(true). This hand-made hydration logic is smaller than hydration logic generated by a component library (such as React/Next.js). This enables fast dynamic DOM rendering with a small Javascript payload. A stand-alone reactive library is sufficient to support creating the dynamic browser-side logic.

Reactive Libraries

A reactive (aka Signal) library allows reactive logic to update the DOM. Reactive programming is a reliable method to ensure that asynchronous data correctly updates the DOM. Useful with:

  • state management & updating the DOM
  • handling asynchronous operations
  • Web Animations

A small reactive library will reduce the size of the JS payload. When there is a substantial amount of state to manage. Even when compared to VanillaJS.

rmemo

Written by this document's author. rmemo is the smallest fully-featured reactive library. It does not require a DOM rendering library to be loaded. Enabling smaller hydration logic. Without a browser-side DOM rendering library.

DOM Rendering Library is Unnecessary

<template>.content.cloneNode, vanillaJS, & a reactive library should be sufficient to handle the dynamic rendering of the Web Component.