Stencil Project Folder Architecture

In this Stencil Project Folder Architecture article, we are going to look at the architecture of stencil when we clone it from github.

What is Stencil Js?

Stencil is a developer-focused toolchain for building reusable, scalable component libraries and design systems. It provides a compiler that generates highly optimized Web Components, and combines the best concepts of the most popular frameworks into a simple build-time tool.

When you clone the project you will get following architecture.

  Stencil Project Folder Architecture

As you can see the is src folder and inside src folder there is assets and components folder,

In the assets folder we will add stuff like images,icon,internationalization files etc.

In the component folder we will add components of the application.

When we expand component folder we can see that  there are multiple components and it is having .tsx extension

The .tsx extension is required since Stencil components are built using JSX and TypeScript.

You can write your component logic in .tsx file.

Stencil Project Folder Architecture

I hope you like this Stencil article.

Also Read :