Skip to content
@vanillawc

VanillaWC

An open source collection of Web Components implemented in vanilla JavaScript

Published on WebComponents.org

Introduction

Welcome to the vanilla Web Components (WC) organization. This is a collective of independent Open Source devs with one goal. To create, share, and promote the use of completely vanilla WC implementations.

That means: no extra layers of abstraction between the WC spec and the implementations here; no extra dependencies to track, maintain, update; no extra build steps to develop.

If the criticisms of the WC standard are really true, that the API to develop vanilla WC is 'too low level', then this group exists to get low level and see what it's all about.

Components

  • WC-Arrow - A web component for creating custom arrow HTML elements
  • WC-Blink - A clone of the classic <blink> element
  • WC-Bullet-Chain - A list with a fancy custom decorator
  • WC-Carousel-Lite - A web component that wraps HTML elements and forms a horizontal carousel slider
  • WC-Code - run code in the browser, disclaimer : this repo is too awesome
  • WC-CodeMirror - Easily embed a CodeMirror editor
  • WC-CSV-Table - Create a table element from CSV data
  • WC-DatePicker - A web component that wraps a text input element and adds date-picker functionality to it
  • WC-Demo - An web component for demoing other web components
  • WC-Icon-Rule - A spicy horizontal rule
  • WC-Include - Import HTML from an external file
  • WC-JSON - Graphical view of a json object
  • WC-Markdown - Embed Markdown with optional syntax highlighting
  • WC-Marquee - A clone of the classic <marquee> element
  • WC-Menu-Wrapper - A web component that wraps HTML elements and forms a drop-down menu out of them
  • WC-Monaco-Editor - Easily embed VSCode's Monaco editor
  • WC-Resume - Embed resume.json content styled with a template
  • WC-Router - go up, go down, now turn left, nope its not there
  • WC-Social-Link - Add links to social profiles the easy way
  • WC-Sortable-Table - A table element that sorts when a header is clicked
  • WC-Template - HTML templating using tagged template literals

How to Contribute

If you have built a WC of your own and think it would be a valuable contribution to the org. Create a Showcase issue.

If you have a suggestion for a new WC that you'd like to share. Create a Proposal issue.

If you have a suggestion or would just like to spark a discussion about WC. Create a Discussion issue.

Recommendations

DON'T

  • Rely on any additional layers of abstraction (ex polymer, lit)
  • Require additional build steps for development (ie prod is OK)
  • Attack others (ie ad hominem), keep the conversation civil or you will be banned

DO

  • Prefix your WC repos with wc-
  • Encapsulate your code WCs wherever possible
  • Build your components for maximum reuse
  • Support Accessibility wherever possible
  • Choose copyleft-friendly licenses1
  • Feel inclined to share your ideas, this is a space for exploration
  • Share in whatever capacity you are able, code isn't the only way to contribute
  • Make sure to read Web Component Best Practices
  • Have fun

1 Specifically, avoid Open Source licenses with special patent clauses. No proprietary/copyright content. When in doubt, use MIT.

Communities

Case Studies

Other Web Component Collections

Resources

Licenses

This repository is dual-licensed

  • source code is licensed under the MIT license
  • written content, and other assets (ex SVG) are licensed under the CC-BY-SA-4.0

Pinned Loading

  1. wc-monaco-editor wc-monaco-editor Public

    A vanilla Monaco Editor web component

    JavaScript 123 13

  2. wc-markdown wc-markdown Public

    A vanilla Markdown Web Component with optional syntax highlighting support

    JavaScript 63 5

  3. wc-codemirror wc-codemirror Public

    CodeMirror as a vanilla web component

    JavaScript 41 10

Repositories

Showing 10 of 25 repositories
  • wc-style-guide Public

    A vanilla web component style guide

    vanillawc/wc-style-guide’s past year of commit activity
    JavaScript 1 MIT 0 1 3 Updated Mar 4, 2023
  • wc-code Public

    run code in the browser, https://vanillawc.github.io/wc-code/

    vanillawc/wc-code’s past year of commit activity
    JavaScript 37 MIT 2 13 0 Updated Feb 23, 2023
  • .github Public

    Vanilla Web Components. A place for framework-free, transpiler-free, scaffolding-free web components.

    vanillawc/.github’s past year of commit activity
    230 CC-BY-SA-4.0 9 10 0 Updated Nov 16, 2021
  • wc-codemirror Public

    CodeMirror as a vanilla web component

    vanillawc/wc-codemirror’s past year of commit activity
    JavaScript 41 MIT 10 5 3 Updated Nov 15, 2021
  • wc-social-link Public

    A vanilla web component for social media links

    vanillawc/wc-social-link’s past year of commit activity
    JavaScript 10 MIT 3 6 0 Updated Nov 12, 2021
  • wc-markdown Public

    A vanilla Markdown Web Component with optional syntax highlighting support

    vanillawc/wc-markdown’s past year of commit activity
    JavaScript 63 MIT 5 2 0 Updated Nov 11, 2021
  • wc-monaco-editor Public

    A vanilla Monaco Editor web component

    vanillawc/wc-monaco-editor’s past year of commit activity
    JavaScript 123 MIT 13 6 0 Updated Nov 11, 2021
  • wc-table Public

    A vanilla web component to view table data

    vanillawc/wc-table’s past year of commit activity
    JavaScript 3 MIT 0 0 0 Updated Oct 7, 2021
  • wc-datepicker Public

    A web component that wraps a text input element and adds date-picker functionality to it.

    vanillawc/wc-datepicker’s past year of commit activity
    24 MIT 5 1 1 Updated Jul 16, 2021
  • wc-bullet-chain Public

    Fancy chained bullet points as a vanilla web component

    vanillawc/wc-bullet-chain’s past year of commit activity
    JavaScript 4 MIT 0 0 0 Updated May 27, 2021