@lf-widgets/foundations
Advanced tools
LF Widgets is a lightweight and versatile Web Components library designed to enhance your web development experience.
Built with modern standards and best practices in mind, LF Widgets offers a collection of reusable components that can seamlessly integrate into any web project, regardless of the framework or vanilla JavaScript setup.
Comfy Marriage
Description:
Provides an advanced charting solution built on top of the Echarts library. It supports various chart types, including line, bar, bubble, and candlestick charts, as well as unique options like dual-axis and heatmap calendars.
Features:
Use Case Highlight:
Perfect for building real-time dashboards, financial data visualizations, and multi-dimensional analytics with polished and professional aesthetics.
Description:
Perfect for creating visually appealing layouts with items of varying sizes. It supports a dynamic masonry or waterfall grid style, making it ideal for galleries, portfolios, and content-heavy applications.
Features:
Use Case Highlight:
Display dynamic content, such as photo galleries or portfolio showcases, where items vary in size and need an elegant, responsive layout.
Description:
Provides a customizable chat interface for interactive roleplay or AI-driven conversations. Users can define a JSON dataset of characters and initiate dynamic dialogues through a third-party API (OpenAI compatible endpoint required).
Features:
Use Case Highlight:
Perfect for creating immersive role-playing experiences, educational tools, or conversational agents where users can interact with pre-defined characters.
Note:
A functional local endpoint is required for chat functionality. If the endpoint is offline, the chat interface will remain static.
To add LF Widgets to your project, you can install it via yarn:
yarn add lf-widgets
Or npm:
npm install lf-widgets
After installing, you can import and use LF Widgets components in your project. Here's a quick example of how to use the <lf-button> component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>LF Widgets Example</title>
<script type="module" src="./path/to/lf-widgets/dist/index.js"></script>
</head>
<body>
<lf-button lf-label="Click me!" />
</body>
</html>
Make sure to replace ./path/to/lf-widgets/dist/index.js with the correct path to the index.js file in your node_modules/lf-widgets directory.
The event handling is wrapped in a single event, emitted by the root element. In this small example we add a listener to the button component, performing different actions for different situations:
const myButton = document.createElement("lf-button");
myButton.addEventListener("lf-button-event", (e) => {
const { eventType } = e.detail;
switch (eventType) {
case "click":
console.log("Click!");
break;
case "blur":
console.log("Blur!");
break;
case "ready":
console.log("The button is ready!");
break;
case "unmount":
console.log("The button has been removed from the DOM!");
break;
}
document.body.appendChild(myButton);
});
LF Widgets ships with a small singleton “core” (LfCore) that underpins theming, portals, debugging features, and more. To ensure your components work correctly (especially if they need access to themes or LLM utilities), it’s recommended to initialize this core before using the widgets.
Below is the recommended pattern, using two exported functions:
getLfCore()// In your top-level code or a dedicated file
import { getLfCore } from "@lf-widgets/core";
// Elsewhere, in a component or function:
function doSomething() {
const core = getLfCore();
core.assets.set("/my-assets-folder");
core.theme.set("dark");
// ...
}
If you’re using <lf-button>, <lf-chart>, or any other LF component, you can rely on the fact that once getLfCore() is called, they’ll be able to access the proper theming and debugging utilities. If you skip the explicit call, any LF Widgets component that needs the core will lazily initialize it when first used.
A typical pattern in a custom element might look like:
connectedCallback() {
const core = getLfCore();
core.theme.register(this);
this.debugInfo = core.debug.info.create();
}
getLfCore() (and set a theme) before rendering components.getLfCore() function gracefully handles SSR by skipping DOM operations on the server, then running the real DOM logic in the browser.getLfCore() in a central place (like your main script or Next.js _app.tsx) if you need to set a theme or do immediate setup.getLfCore(), the core will be initialized when the first LF Widgets component is used.Either way, once LfCore is ready, all LF Widgets have access to theming, portals, debug logging, and other shared features.
For detailed information about each component, including available properties, events, and methods, please refer to the showcase.
If you discover a new bug or have an exciting idea for a new component, feel free to open an issue or a discussion! Check out the issues or discussions tabs to see how you can get involved.
Pull requests are also welcome if you want to contribute firsthand. Just clone the repository and run from the root:
yarn install
Then you can launch the development environment with the command:
yarn dev
Comfy MarriageLF Widgets forms the backbone of LF Nodes for ComfyUI, a suite of custom nodes designed for ComfyUI workflows. This integration showcases the power and flexibility of web components, making it clear just how effortless it is to introduce new widgets into complex systems.
Why it works:
And… they look fantastic in action!
| Tool | Purpose | License |
|---|---|---|
| Cypress | E2E tests engine | MIT |
| Echarts | Data visualization components | Apache 2.0 |
| Google Fonts | Typography for various components | OFL |
| Next.js | Engine behind the showcase application | MIT |
| Prism.js | Syntax highlighting for code blocks | MIT |
| Stencil.js | Web Components engine | MIT |
| Tabler Icons | Icon library for UI elements | MIT |
For detailed licensing information, see the NOTICE file.
LF Widgets originates from a fork of Ketchup. While Ketchup provided a strong foundation, LF Widgets has been completely reimagined with a focus on:
This project uses Tabler Icons under the MIT License. Icons have been customized for this project.
To add custom SVGs:
width, height and hardwired colors).src/assets/svg folder.This project uses several fonts from Google Fonts, including:
To add custom fonts:
src/assets/fonts folder.FAQs
LF Widgets - Types and constants
We found that @lf-widgets/foundations demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.