A React inspired, component-based UI library for the web. Built with Superfine. Built to be lean.
Merge pull request #1 from mini-eggs/dependabot/npm_and_yarn/lodash.merge-4.6.2
Merge pull request #3 from mini-eggs/dependabot/npm_and_yarn/mixin-deep-1.3.2
Merge pull request #2 from mini-eggs/dependabot/npm_and_yarn/lodash-4.17.15


browse  log 



You can also use your local clone with git send-email.

gzip size


A React inspired, component-based UI library for the web. Built with Superfine. Built to be lean.

#Live example


#'Hello, World!' example

import wigly from "wigly";

function App(props) {
  return <div>{props.greeting}, World!</div>;

wigly.render(<App greeting="Hello" />, document.body);

#Stateful counter example

import wigly, { state } from "wigly";

function Counter() {
  var [count, set] = state(0);

  return (
      <h1>Count: {count}</h1>
      <button onclick={set(count + 1)}>increment</button>

wigly.render(<Counter />, document.body);

#Using AJAX calls

import wigly, { state, effect } from "wigly";

function App(props) {
  var [username, set] = state();

  // Optional second parameter, will only call first parameter when userId value changes.
  // If no second paramter is given the first parameter will be called after every render.
  // Operates the exact same as React's useEffect.
    async function() {
      var request = await fetch(`/get/user/${props.userId}`);
      var result = await request.json();

  return (
      <div>{username ? `Username: ${username}` : "loading"}</div>

wigly.render(<App userId={123} />, document.body);

#Advanced, lazy/async components

import wigly from "wigly";

// A function that returns a promise that will resolve to a
// component can be used as a valid wigly component.
let LazyChild = () => import("./components/child");

let App = () => (
    <LazyChild />

wigly.render(<App />, document.body);

#Advanced, creating a 'styled-components' package

import wigly, { state, effect } from "wigly";
import tags from "dom-tags";
import stringcss from "string-css";

let styled = tags.reduce(
  (fns, key) => ({
    [key]: style => props => {
      let [classes] = state(stringcss.css(style));
      effect(stringcss.inject, 0);
      return wigly.h(key, {
        class: props.class ? `${classes} ${props.class}` : classes

let Title = styled.h1`
  color: #121212;
  font-family: nyt-cheltenham, georgia, "times new roman", times, serif;
  font-weight: 700;
  font-style: italic;

wigly.render(<Title>Your Styled Component Here</Title>, document.body);