Exlement.js is a revolutionary web development framework that extends HTML with powerful, AI-ready custom elements. Build sophisticated websites and applications with the simplicity of writing HTML tags.
- Features
- Installation
- [Quick Start](#Quick Start)
- Documentation
- Examples
- HTML Reimagined: Create complex layouts and functionality with custom elements as simple as native HTML tags.
- Rapid Development: Build feature-rich web applications in record time.
- AI-Ready Components: Integrate sophisticated AI features directly into your HTML structure.
- Dynamic Content Generation: Easily create and manage dynamic content.
- Advanced UI Components: Implement complex UI elements with ease.
- Seamless Interactivity: Add interactive elements without extensive JavaScript knowledge.
- Developer Tools Integration: Enhance your development workflow with built-in tools.
- Flexible Layouts: Create responsive designs effortlessly.
You can include ExpressElement in your project via CDN:
<link rel="stylesheet" href="https://unpkg.com/exlement@1.2.0/assets/css/exlement.css">
<script src="https://unpkg.com/exlement@1.2.0/exlement.js"></script>
<script src="https://unpkg.com/exlement@1.2.0/tx-exlement.js"></script>
<script src="https://unpkg.com/exlement@1.2.0/webllm-exlement.js"></script>Copy and paste this into an HTML file and you're ready.
Transformers.js Components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exlement Demo</title>
<link rel="stylesheet" href="https://unpkg.com/exlement@1.2.0/assets/css/exlement.css">
<script src="https://unpkg.com/exlement@1.2.0/exlement.js"></script>
</head>
<body>
<page-base>
<page-top
data='{"logo": "../assets/imgs/express_element-logo.jpeg", "links": [{"text": "Home", "url": "#home"}, {"text": "About", "url": "#about"}, {"text": "Contact", "url": "#contact"}]}'
option='{"logo": "left", "bgColor": "#4a90e2", "textColor": "#ffffff"}'></page-top>
<page-container>
<page-container>
<page-heading title="Exlement: Bringing Transformers.js to Everyone"
subtitle="Revolutionizing Web Development"
text="Discover how Exlement integrates Transformers.js to create powerful, open-source AI-powered chat components for your web applications."
bg-color="#f0f8ff" title-color="#0066cc" subtitle-color="#ff6600" text-color="#333333"
title-font="'Montserrat', sans-serif" subtitle-font="'Roboto', sans-serif"
text-font="'Open Sans', sans-serif" title-size="48" subtitle-size="20" text-size="18"
padding="3rem"></page-heading>
</page-container>
<page-tx-chat model="Xenova/LaMini-Flan-T5-783M" task="text2text-generation" theme="dark"
placeholder="Ask me anything..." send-button-text="Go"></page-tx-chat>
</page-container>
<page-bottom
data='{"copyright": "2024 Exlement", "links": [{"text": "Privacy", "url": "/privacy"}, {"text": "Terms", "url": "/terms"}]}'
option='{"bgColor": "#4a90e2", "textColor": "#ffffff", "align": "center"}'></page-bottom>
</page-base>
</body>
</html>Basic Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exlement Quick Start</title>
<link rel="stylesheet" href="https://unpkg.com/exlement@1.2.0/assets/css/exlement.css">
<script src="https://unpkg.com/exlement@1.2.0/exlement.js"></script>
</head>
<body>
<page-base>
<page-top
data="{'logo': '../assets/imgs/express_element-logo.jpeg', 'links': ['Home', 'About', 'Contact']}"></page-top>
<page-container>
<page-content level="1" text="Welcome to Exlement"></page-content>
<page-layout column="2">
<page-content level="7"
text="Build websites faster than ever with custom HTML elements! "></page-content>
<page-content level="7"
text="If not grouped by page container they are treated individually"></page-content>
</page-layout>
<page-layout column="3">
<page-column>Column 1 content</page-column>
<page-column>Column 2 content</page-column>
<page-column>Column 3 content</page-column>
</page-layout>
</page-container>
<page-bottom data="{'copyright': '2024 Exlement', 'links': ['Privacy', 'Terms']}"></page-bottom>
</page-base>
</body>
</html>Chat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exlement Demo</title>
<link rel="stylesheet" href="https://unpkg.com/exlement@1.2.0/assets/css/exlement.css">
<script src="https://unpkg.com/exlement@1.2.0/exlement.js"></script>
</head>
<body>
<page-base>
<page-top
data="{'logo': '../assets/imgs/express_element-logo.jpeg', 'links': ['Home', 'About', 'Contact']}"></page-top>
<page-container>
<page-chat server-url="https://api.openai.com/v1/chat/completions" chat-type="openai"
model="gpt-3.5-turbo">
</page-chat>
</page-container>
<page-bottom data="{'copyright': '2024 Exlement', 'links': ['Privacy', 'Terms']}"></page-bottom>
</page-base>
<script>
window.EXLEMENT_CONFIG = {
OPENAI_API_KEY: 'your key goes here'
};
</script>
</body>
</html>AI Code Reviewer and Editor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exlement Demo</title>
<link rel="stylesheet" href="https://unpkg.com/exlement@1.2.0/assets/css/exlement.css">
<script src="https://unpkg.com/exlement@1.2.0/exlement.js"></script>
</head>
<body>
<page-base>
<page-top
data="{'logo': '../assets/imgs/express_element-logo.jpeg', 'links': ['Home', 'About', 'Contact']}"></page-top>
<page-container>
<page-ai-code-editor ai-type="openai" model="gpt-3.5-turbo"
server-url="https://api.openai.com/v1/chat/completions" language="javascript"
api-key="your-api-key-here"></page-ai-code-editor>
</page-container>
<page-bottom data="{'copyright': '2024 Exlement', 'links': ['Privacy', 'Terms']}"></page-bottom>
</page-base>
<script>
window.EXLEMENT_CONFIG = {
OPENAI_API_KEY: 'your key goes here'
};
</script>
</body>
</html>