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

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

    A vanilla Monaco Editor web component

    JavaScript 114 13

  2. wc-markdown wc-markdown Public

    A vanilla Markdown Web Component with optional syntax highlighting support

    JavaScript 63 7

  3. wc-codemirror wc-codemirror Public

    CodeMirror as a vanilla web component

    JavaScript 39 10

Repositories

Showing 10 of 25 repositories