Facoweb

Reusable web components with plain JavaScript and CSS.

Limitation

• Not support WebKit engine issues.
• Not support old browser versions.

Features

• No build step.
• Encapsulation.
• Standalone every components.

Demonstration

Preview

All

• faco-demo - All Facoweb components in one page.

Header

• faco-header - Header UI with top-bar, main-menu, and drawer-menu.
• • faco-main - For slide to open 'drawer-menu' on 'faco-header'.

Footer

• faco-footer - Footer UI with navigation links, description, copyright, social links and bottom links.

Code

• faco-code - Code viewer, support custom syntax highlighting that not easy, required skill regular expression.

Tab

• faco-pager - Tab UI with page controller.
• faco-tab - Simple tab UI.

---

Demo on Server

Access Demo: [server]/facoweb/doc/[ui]/
For examples: faco-tab

• http://localhost/facoweb/doc/faco-tab/
• https://example.com/facoweb/doc/faco-tab/
• https://example.com/facoweb/doc/faco-tab/index.html

---

Usage

Pick UI: facoweb/ui/ (e.g., faco-tab).
Add to html:

<!-- E.g., faco-tab -->
<faco-tab></faco-tab>
<script src="facoweb/doc/faco-tab/data.js" defer></script>
<script type="module" src="facoweb/ui/faco-tab/index.js"></script>

<!-- 
<[ui]></[ui]>
<script src="facoweb/doc/[ui]/*data.js" defer></script>
<script type="module" src="facoweb/ui/[ui]/index.js"></script>
-->

For details: facoweb/doc/[ui]/README.md:

• faco-header README
• • faco-main README
• faco-footer README
• faco-pager README
• faco-tab README
• faco-code README

---

Minimal Setup

E.g., faco-tab Copy and remove:

cp facoweb/ui/faco-tab/ . # Copy 'faco-tab'
cp facoweb/doc/faco-tab/*data.js . # Copy all '*data.js'
rm -r facoweb/ # Remove Facoweb project
touch test.html # Create 'test.html'

Add to test.html:

<faco-tab></faco-tab>
<script src="./data.js" defer></script>
<script type="module" src="./faco-tab/index.js"></script>

Test: [server]/test.html\

Support renaming UI directory without issues.

mv faco-tab/ facooya-tab/

<script type="module" src="./facooya-tab/index.js"></script>

---

Directory Structure

• ui/ - Reusable components.
• doc/ - Documentation and demonstration.
• assets/ - Icons and share css and js.

---

FACOWEB: Facooya Web
Maintained by Facooya and Fanone Facooya, 2026