Python library for creating dynamic websites.

HTML, Web, JS, CSS, Javascript
pip install arcane==0.2



Easy-to-use Python library to create dynamic HTML pages with css and JS.

Under Development!

Most of the stuff shown in this page is under development!
Feel free to install Arcane and test it by your own risk.


  • React-like components (using python classes).
  • Compiles into Javascript code (you don`t have to touch the js!).
  • Component Styiling using css.

Upcoming Features

  • Customizable Actions
  • More HTML Components (section, nav, table, etc...)


You can test arcane with pip.

pip install arcane

Once installed you can use most of Arcane classes by importing:

import arcane.components
import arcane.structures

The components file holds the Component class and all of HTML components, where structures contains the classes Page and in the future, Site.


HTML Components

Arcane provides some already made components that transpile into pure HTML like:

  • Title -> h1
  • Container -> div
  • Paragraph -> p
  • Link -> a
  • Button -> button

Components Class

Arcane uses the Component class to transpile your code into JS, HTML and CSS, it has a "render" function that must return a single Component (yours or any HTML Component).
Components are made to be reusable in your code, just like React components.
Inside it you can freely use all of the HTML components mentioned above.


import arcane.components
import arcane.structures

class Menu(Component):
    def render(self):
        links = [Link("Home"), Link("About-us"), Link("FAQ")]
        container = Container(links)

        return container

Now you can insert your Menu component inside any other component or page that you create.


All HTML components have trigger functions that will be called when it`s equivalent JS trigger is called.
Those triggers will recieve another function as parameter and will pass an Action class to it.
The Actions class have a "do" function that will transpile some pre-made Arcane events into JS events.


class Hello(Component):

    def toggle_menu(self, actions):
        # The toggle function will show or hide the component

    def render(self): = Menu()
        title = Title("Hello World!")
        button = Button("Toggle menu.", id="button")
        container = Container([menu, title, button])

        return container

The trigger will call the that will be transpiled to:

document.getElementId("button").addEventHandler("click", function() {
  let toggle = document.getElementId("menu"); == "none"
    ? ( = "block")
    : == "none";


The Page class will join all of your desired components into a string ready to be written on a index.html file or to be returned by the server. To get that string you must call the build() function.


class Home(Page):
    def construct():
        return Hello()

with open("index.html", "w+") as file: