Welcome to MIXT documentation

MIXT: Write html components directly in python and you have a beautiful but controversial MIXTure.

Yes, controversial.

If you don't like it, ignore it (but you can use this without the html-in-python part, see below ;))

Based on pyxl. Python 3.6+ only, and use typing for data validation.

Once you have your html, you can do whatever you want with it. Think of it as a replacement for your classic template engine.

Source code: https://github.com/twidi/mixt/

Documentation: https://twidi.github.io/mixt/

PyPI: https://pypi.org/project/mixt/

CI (CircleCi): https://circleci.com/gh/twidi/workflows/mixt/

Basic usage

Let's create a file example.py

# coding: mixt

from mixt import html, Element, Required

class Hello(Element):
    class PropTypes:
        name: Required[str]

    def render(self, context):
        return <div>Hello, {self.name}</div>

print(<Hello name="World"/>)

And execute it:

$ python example.py
<div>Hello, World</div>

If you don't like to write html in python, you can still use it:

from mixt import html, Element, Required

class Hello(Element):
    class PropTypes:
        name: Required[str]

    def render(self, context):
        return html.Div()("Hello, ", self.name)

print(Hello(name="World"))

Features

Yes it is inspired by React (in fact, mainly JSX) and we borrow some of the concept:

  • props and PropTypes with validation

  • dev-mode to validate props in dev but not in production to speed things up (your tests should have tested that everything is ok)

  • context

  • class components or simple function components

  • high order components

And we added:

  • write css using python

  • css/js collectors

  • proxy components

Installation

Run these two commands. The second one will tell python how to understand files with html inside.

pip install mixt
mixt-post-install

To check that everything is ready, run:

python -m mixt.examples.simple

You should have this output:

<div title="Greeting">Hello, World</div>

If you don't want to use the html-in-python stuff, don't run mixt-post-install. And then test with (to have the same output):

python -m mixt.examples.simple_pure_python

Contribute

Clone the git project then:

make dev

To check that everything is ready, run:

python -m mixt.examples.simple

You should have this output:

<div title="Greeting">Hello, World</div>

After having done some code:

make tests
make lint

If you touch things in the codec directory, you'll have to run make dev (or at least make full-clean) to purge the pyc python files.

Note that our CI will check that every commit passes the make lint, make tests and make check-doc. So don't forget to run these for each commit.

One way to do it before pushing is:

git rebase develop --exec 'git log -n 1; make checks'

User guide

As a next step, you may want to read the user guide.

API

And then you can continue by reading the API documentation.

mixt.contrib

Mixt aims to follow Python’s “batteries included” philosophy. It ships with a variety of extra, optional tools that solve common problems.

This code lives in mixt/contrib in the mixt distribution.

css

Allows to write CSS in python.

Read the "mixt.contrib.css" documentation.