Still.js Framework

StillJS is a Web UI Framework which uses Vanilla JavaScript to help you to build user interfaces, but focuses on a component approach, allowing you to modularize your UI in the same fashion as React and Angular. Visit the official documentation for a deeper overview.

Documentation

Complete documentation is not yet available, as the work is in progress. Still, there is quite a lot of content and documentation available on https://stilljs.dev and on Github.

Community

Still.js is in development. You are more than welcome to join the Discord channel.

Contributions

As an Open Source project, we welcome any contributions to Still.js. You can start by joining the Discord channel, below are some ways one might contribute:

1. Report Bugs
2. Implement new Features
3. Suggest improvements
4. Improving/enriching documentations

Getting Started

Still.js project creation is to be done through the still-cli tool npm package, therefore do not directly install the @stilljs/core package for your project. The idea is to create a project instead.

Installation

The official documentation concerning environment set up and project creation can be found here. Install with npm (using the -g flag) as follow:

npm i @stilljs/cli -g

Creating a project

Create a folder for your project (e.g. project-name) and from inside that folder initialize the project as shown below:

npx still init

After initializing, the project the framework structure and files are downloaded to the folder.

Project structure

    project-name/ //Your project folder
    |___ @still/ // Still.js framework
    |___ app/ // Folder which holdes app files
    |     |__ HomeComponent.js //Component generated automatically when creating project
    |__ config/ //Folder containing application configuration files
    |     |__ app-setup.js //App configuration file/class
    |     |__ app-template.js //App template skeleton
    |     |__ route.map.json //Component routing and path file
    |__ index.html //Application container
    |__ jsconfig.js //Basic configuration for vscode
    |__ package.json // Regular package JSON

Usage example

import { ViewComponent } from "../../@still/component/super/ViewComponent.js";

export class HomeComponent extends ViewComponent {

    /** 
     * isPublic flag is needed for any component that is publicly accessible, therefore 
     * when dealing with scenarios like authentication and permission, or any component requiring
     * user permissions, this flag will be removed or set to false
     */
    isPublic = true;
    template = `
        <div>
            <h2>Hello world!</h2>
            <p>
            I'm an easy component with a button
            </p>
            <button>I'm a button</button>
        </div>
    `;
}

IMPORTANT:

Since Still.js is written in vanilla JavaScript using ESModules, all imports must include the .js extension. Refer to the documentation for configuring VSCode accordingly:

VSCode setup documentation

Running the project

From the project folder, use the still cli to run the app as follow:

npx still serve

Alternative from CDN

When using CDN, Still.js allows you to create powerful micro-front-end solutions along with a component approach. Follow the official documentation to set it up.

<script src="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/lone.js" type="module"><script>
<link href="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/ui/css/still.css" type="module" rel="stylesheet"><link>