<h1> <p align="center" style="color: #16b8f3"> <img width="180" src="https://github.com/vuepy/vuepy/blob/master/docs/assets/vuepy-logo.svg?raw=true">  </p> </h1> <samp> <p align="center"> <span>a progressive, incrementally-adoptable Python framework <br>for building web interface in Jupyter Notebook.</span> <br> <a href="#installation">installation</a> . <a href="https://www.vuepy.org/guide/introduction.html">docs</a> .  <a href="https://www.vuepy.org/guide/quick-start.html">learn</a> </p> </samp>

About

Vue.py (pronounced /vjuːpaɪ/, like "view py") is a reactive Python framework for building web interface in Jupyter. It is built upon standard HTML, CSS, and Python, offering a declarative and component-based programming model that aids in the efficient development of user interfaces. Vue.py is capable of handling both simple and complex interfaces.

🛠️ create custom web interface using pure Python in Jupyter
🤖 prototype within .ipynb or .py files
🪄 reactive: update the data, vuepy will reactively update all dependent view components
🚀 batteries-included: built-in IPywUI includes 37+ commonly used UI components
🚀 batteries-included: Panel-vuepy includes 130+ commonly used UI components
🧩 extensible: can easily integrate third-party python libraries such as plotly, bokeh, panel, pandas, ipyleaflet etc
🖐️ interactive: bind sliders, buttons, plots, and more to Python — no callbacks required
🚀 run in Jupyter, JupyterLab, VSCode, Cursor, Google Colab and more
✨ generate UI interface with one click through AI-driven conversation interface. provide llms.txt, llms-ctx.txt, llms-ctx-ipywui.md, llm-ctx-panel-vuepy.md

Installation

Vue.py is available on PyPI:

pip install vuepy-core

Usage

from vuepy import ref, create_app

def setup(*args):
    count = ref(0)
    
    def counter():
        count.value += 1
    
    return locals()


app = create_app({
    'setup': setup,
    'template': '''
    <Button :label="f'Count is: {count.value}'" 
      @click='counter()'
    ></Button>
    '''
})
app.mount()

Read the documentation to learn more.

Learn more

vuepy is easy to get started with, with lots of room for powers users.

Check out our docs, the examples/ folder, and our gallery to learn more.

<table> <tr> <th></th> <th>Desc</th> <th>Link</th> </tr> <tr> <td><img src="https://github.com/vuepy/vuepy/blob/master/docs/assets/readme-demo.gif?raw=true" with='389px'></td> <td>Reactivity</td> <td><a target="_blank" href="https://www.vuepy.org/guide/essentials/reactivity-fundamentals.html">Read more</a> </td> </tr> <tr> <td><img src='https://github.com/vuepy/vuepy/blob/master/docs/assets/plotly.gif?raw=true' with='389px'></td> <td>Interacting with <a target="_blank" href="https://plotly.com/python/">plotly</a></td> <td><a target="_blank" href="https://www.vuepy.org/ipywui/display.html#%E9%9B%86%E6%88%90-plotly-%E7%BB%98%E5%9B%BE%E7%BB%84%E4%BB%B6">Read more</a> </td> </tr> <tr> <td><img src='https://github.com/vuepy/vuepy/blob/master/docs/assets/run-in-vscode.gif?raw=true' with='389px'></td> <td>Run in VSCode</td> <td><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter">Read more</a> </td> </tr> <tr> <td><img src='https://github.com/vuepy/vuepy/blob/master/docs/assets/cursor_10fps.gif?raw=true' with='389px'></td> <td>Building vuepy app with LLMs</td> <td><a target="_blank" href="https://www.vuepy.org/guide/build-vuepy-withs-llms.html">Read more</a> </td> </tr> <tr> <td><img src='https://github.com/vuepy/vuepy/blob/master/docs/assets/vleaflet-demo-orgin-low.gif?raw=true' with='389px'></td> <td>vleaflet interactive maps demo</td> <td> <a target="_blank" href="https://github.com/vuepy/vuepy/blob/master/examples/vleaflet_travel/travel.ipynb">Read more</a>, <a target="_blank" href="https://www.vuepy.org/vleaflet/overview.html">docs</a> </td> </tr>  </table>

Support

Having trouble? Get help in our Discord or open a Discussion.

Contributing

New contributors welcome!

License

MIT

Vuepy

Install / Use

README