PyScript 💻 - pyscript-ltk

@chrislaffra @chris.laffra

In this channel we discuss the LTK toolkit. See https://github.com/pyscript/ltk

GitHub - pyscript/ltk: LTK is a little toolkit for writing UIs in P...

LTK is a little toolkit for writing UIs in PyScript - pyscript/ltk

3

When I tried the ltk kitchen sink demo i noticed the tutorial wasn't cancelled if you select a different tab while the tutorial demo was active. Is that still the case? Maybe it would be possible to demo how to hide the tutorial when tabs are switched?

AndrewD

When I tried the ltk kitchen sink demo i noticed the tutorial wasn't cancelled if you select a different tab while the tutorial demo was active. Is that still the case? Maybe it would be possible to demo how to hide the tutorial when tabs are switched?

Would you have an idea how to do that? We love PRs that improve the pyscript eco-system, including LTK.

chris.laffra

Would you have an idea how to do that? We love PRs that improve the pyscript eco-system, including LTK.

I'm at the "intellectually curious" stage with pyscript and have done a few experiments, but with ltk I've only run the demo so there is a bit more time required before I can contribute a useful pr. I live in the embedded hardware / fpga / software space: I'm curious about pyscript for tools to interact with my products without much "web" learning curve.

AndrewD

I'm at the "intellectually curious" stage with pyscript and have done a few experiments, but with ltk I've only run the demo so there is a bit more time required before I can contribute a useful pr. I live in the embedded hardware / fpga / software space: I'm curious about pyscript for tools to interact with my products without much "web" learning curve.

No problem. The fix was easy. A new version of LTK has been published with the fix and the Kitchensink now works as expected when you switch away from the tutorial tab while a tutorial is active. See the commit here: https://github.com/pyscript/ltk/commit/3f6bf81b01dbe820b1ee8d64605f2dba58d70d23

Only render tutorial steps when the target widget is visible · pysc...

1

How to get started with ltk?

zobi

How to get started with ltk?

go here: https://pyscript.github.io/ltk/?tab=13 cut and paste

1

Neon22

go here: https://pyscript.github.io/ltk/?tab=13 cut and paste

Got the following.

Just run it on its own - not inside a spreadsheet....

What are the spreadsheets for?

What you are looking at @zobi is PySheets, which is an app written on top of LTK. If you click on the link at the bottom-left, you will be taken to the LTK page.

22:17

https://github.com/pyscript/ltk

GitHub - pyscript/ltk: LTK is a little toolkit for writing UIs in P...

LTK is a little toolkit for writing UIs in PyScript - pyscript/ltk

22:19

The github README has information on how to get started. One of the things to try is the Kitchensink, which will give you inspiration on what is possible with LTK. The README also has links to minimal projects on pyscript.com to get you started.

22:21

PySheets is not a general-purpose IDE. If you want to build your own app in LTK, it is best to start in pyscript.com. That said, cool you registered for PySheets and tried it out.

@chris.laffra I know about LTK.I have attended your community call on Py Sheets about reading csv file, was willing to try but was not sure where to start.

zobi

@chris.laffra I know about LTK.I have attended your community call on Py Sheets about reading csv file, was willing to try but was not sure where to start.

The best place to start with LTK is to visit the github repo: https://github.com/pyscript/ltk. It links to the Kitchensink that shows all widgets.

LTK shows error when you select dropdown for MicroPython.

zobi

LTK shows error when you select dropdown for MicroPython.

In the Kitchensink example, "choose_theme" should not be wrapped with a callback decorator. This has been fixed.

chris.laffra

In the Kitchensink example, "choose_theme" should not be wrapped with a callback decorator. This has been fixed.

Rechecked it.It's fixed

1

So this is basically a library for creating the UI entirely in python?

So no real need to bother with HTML?

20:48

Other than to set it up.

The ltk is a wrapper to make it easier in python to specify html/css UI entities and to hook up interactions.\ between them. Its still html and css though. In my experience its been quite straightforward to construct complex UIs with a high degree of interaction using the ltk. But you still need to know a little jquery and css and html but very little to none, javascript.

I mean more in the sense that I can craft a UI with less manual HTML.

21:19

Like, I'm just learning pyscript. And I do enjoy the fact that I bypass writing any of my own javascript, and only have minimal direct interaction with the API.

21:20

So I'm interested in what seems like a way to also write less HTML, because HTML is a little cumbersome.

I've never seen python code look like this. I have a hard time even making out what's happening.

import ltk

(
    ltk.VBox(
        ltk.HBox(
            ltk.Text("Hello"),
            ltk.Button(
                "World", 
                lambda event: 
                    ltk.find(".ltk-button, a")
                        .css("color", "red")
            )
            .css("color", "blue")
        )
    )
    .appendTo(ltk.window.document.body)
)

(edited)

23:12

Like what is this .css() stuff, isn't a dot supposed to signify an attribute of something else? (edited)

I guess css is an attribute of a widget. And because we're between parentheses we're allowed to use newlines and tabs this way? So the dot applies to the return values of those widget constructors? Does css() return the widget it was called on?

Correct. This technique is usually referred to as "chaining" in programming languages and is quite popular in JavaScript and the jQuery library. LTK is a thin layer around jQuery, but entirely written in Python. It allows you to write client-side UIs in Python.

I have worked a little with tkinter to prototype my stuff.

Is there a more comprehensive documentation, like what widgets there are? Or do I just read the code for it?

11:44

Like right now I'm just looking in widgets.py

Manock

Is there a more comprehensive documentation, like what widgets there are? Or do I just read the code for it?

Have you seen the Kitchensink that shows all the widgets? https://pyscript.github.io/ltk/

I did end up quickly browsing it. Although examining the source code also taught me a lot. By the way, once you add a widget to the document, can you make changes to it live, or do you need to find() the element you just added?

Manock

I did end up quickly browsing it. Although examining the source code also taught me a lot. By the way, once you add a widget to the document, can you make changes to it live, or do you need to find() the element you just added?

you can refer to it as a self.thispart = ltk.Input() then you have long term access to it. or give it an id with .attr("id","zoom").addClass("vcenter bloat") and get it whenever you need it with an ltk.find("#zoom").val() or an ltk.find_list(".bloat") or an ltk.jQuery("#zoom") or somesuch. (edited)

Well I meant more like.

  my_w = MyWidget().appendTo(document.body)
  my_w.text('New Text')

(edited)

Neon22

you can refer to it as a self.thispart = ltk.Input() then you have long term access to it. or give it an id with .attr("id","zoom").addClass("vcenter bloat") and get it whenever you need it with an ltk.find("#zoom").val() or an ltk.find_list(".bloat") or an ltk.jQuery("#zoom") or somesuch. (edited)

Will doing it like this update the text in the body live?

oh yes. see here: https://pyscript.com/@neon22/iso-weaves/latest has all that and SVG live maipulation. Try to click on an input and use your mousewheel to scroll the change in values. Not the best code but an early experiment

I also ran into an interesting behavior. If I build an existing widget class and use addClass() on it, LTK will still override my style sheet, unless I add the style sheet to the page through script.

I use stylesheet and only use .css() if I can't be bothered. Inherits better. .css() overrides the style sheet

Neon22

I use stylesheet and only use .css() if I can't be bothered. Inherits better. .css() overrides the style sheet

I never used .css(), it's the LTK styles that override my own style sheet. So if I use a constructor to create a widget, and then add my own class. That widget's default style will override my own style.

13:40

Because when I import the ltk module it adds the style sheet to the end of the <head>.

To be fair most of the basic tags don't really have any styles. Or just behavior-related ones. Not sure why HBox and VBox for example have their own fonts.

Not that it's hard to create my own widgets from scratch. jQuery and CSS seem to do most of the heavy lifting anyway. (edited)

ok. what I do in that case is lookup the styles that are being used (using the inspector) then override them in my main.css at the very end of the file. (maybe that's not so impt). Then my css file overrides the ltk one. Mine appears after the ltk one in the index.html (not sure how critical that is either).

20:56

but if I do that - I can override the ltk styles without difficulty

Neon22

ok. what I do in that case is lookup the styles that are being used (using the inspector) then override them in my main.css at the very end of the file. (maybe that's not so impt). Then my css file overrides the ltk one. Mine appears after the ltk one in the index.html (not sure how critical that is either).

You can only override the ltk files either if you inject it through script, or if you put both the ltk class and your own class in your file and override by specificity.

Neon22

ok. what I do in that case is lookup the styles that are being used (using the inspector) then override them in my main.css at the very end of the file. (maybe that's not so impt). Then my css file overrides the ltk one. Mine appears after the ltk one in the index.html (not sure how critical that is either).

how do you put your css file after the ltk css? the ltk css (and the js) is injected at the bottom of <head>, not loaded as a stylesheet link. my problem is it overwrites and breaks the darkmode of pico css

CyberneticDaisy

how do you put your css file after the ltk css? the ltk css (and the js) is injected at the bottom of <head>, not loaded as a stylesheet link. my problem is it overwrites and breaks the darkmode of pico css

in head I have:

<!-- Import PyScript -->
<link rel="stylesheet" href="https://pyscript.net/releases/2024.8.2/core.css">
<script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>

 <!-- Import jQuery - used in ltk/jquery.py -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

in body I have:

<script type="py" src="main.py" config="pyscript_pyo.toml" terminal></script>
<link rel="stylesheet" href="./main.css"/>

CyberneticDaisy

how do you put your css file after the ltk css? the ltk css (and the js) is injected at the bottom of <head>, not loaded as a stylesheet link. my problem is it overwrites and breaks the darkmode of pico css

Here is a project with the ltk and a number of overridden css entries in main.css (at the very end)

https://pyscript.com/@neon22/sectional-beam-raddle-distribution/latest?files=main.py,index.html

This works well for me to override the ltk css entries

1

Neon22

in head I have:

<!-- Import PyScript -->
<link rel="stylesheet" href="https://pyscript.net/releases/2024.8.2/core.css">
<script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>

 <!-- Import jQuery - used in ltk/jquery.py -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

in body I have:

<script type="py" src="main.py" config="pyscript_pyo.toml" terminal></script>
<link rel="stylesheet" href="./main.css"/>

ohhh in the body, got it

CyberneticDaisy

ohhh in the body, got it

Sweet

sharing something I figured out: I wanted to have a button be the default action when hitting Return in a text box, and I found I can achieve that by putting type="submit on the button, but for it to work the button and the text box need to be in a form, which was mostly easy to do (change my widget from inheriting from ltk.Div to inheriting ltk.Form) but I had to set action on the form for it to be a valid and functional form. I found the way to what while preventing the form submit from performing a page load is: self.attr("action", "javascript:void(0);") but I was dissatisfied with that because it's js. So on a hunch I changed it to self.attr("action", "pyscript:lambda e:pass") and I was very pleased that this was correct!

1

you could also have used 'ltk.proxy(lambda event: pass)`

Ah, thanks

that's what i really wanted but didn't know how to find out

FYI, the proxy is only needed on PyOdide as MicroPython handles FFI differently and will keep track of Python pointers sent to JS and vice-versa without needing a proxy.

Neon22

you could also have used 'ltk.proxy(lambda event: pass)`

that helped me get my latest thing working, combining this: remove_notif = ltk.proxy(lambda event, ui: ltk.jQuery(event.target).remove()) with this

    for notif in reversed(data.pop("notifications", [])):
      ltk.Div(ltk.Text(notif)).attr("id", "notif-popup").on("dialogclose", remove_notif).dialog()

cos clicking the close button on a jQuery dialog doesn't remove it from the DOM and that's not friendly for screenreaders

1

I did not think it made sense to have a special ltk.Dialog class, but it would be nice to create one to capture this pattern.

Wondering what the relationship is between LTK and , say a new Jquery widget like Carousel - what LTK approach and objects to address. Then how about something more complicated like GSAP animation?

I'm trying to figure out how to programatically add menu items to a menu but the only "straightforward" method I can see is replacing the whole menu each time

mrc

Wondering what the relationship is between LTK and , say a new Jquery widget like Carousel - what LTK approach and objects to address. Then how about something more complicated like GSAP animation?

You can see the source at github to explore how LTK wraps existing jQuery elements. A good example is ltk.Tabs, which wraps a <div> and then calls the jQueryUI "tabs()" function to have jQuery turn the div into a list of tabs. https://github.com/pyscript/ltk/blob/main/ltk/widgets.py#L575

ltk/ltk/widgets.py at main · pyscript/ltk

LTK is a little toolkit for writing UIs in PyScript - pyscript/ltk

unable to open pysheets app shows the following message?

@zobi What is unclear about the message? What happens when you click OK? (edited)

Chris Laffra

@zobi What is unclear about the message? What happens when you click OK? (edited)

It works for sometime and later stops showing the following message.

What browser?

Microsoft Edge.

See the discussion in the pyscript-bugs channel.

2

LTK was covered by the RealPython Podcast this week. LTK (and PyScript/Anaconda) received nice feedback from the podcast hosts. Today, I recorded a full hour podcast with them on Communication skills, PySheets, MicroPython, PyOdide, PyScript. That podcast will be published some time in October. See episode 220 for LTK: https://realpython.com/podcasts/rpp/220/#t=2658 (edited)

Episode #220: Configuring Git Pre-Commit Hooks & Estimating Softwar...

How do you take advantage of Git pre-commit hooks? How do you build custom software checks and rules that run every time you commit your code? Christopher Trudeau is back on the show this week, bringing another batch of PyCoder's Weekly articles and projects.

1

CyberneticDaisy

I'm trying to figure out how to programatically add menu items to a menu but the only "straightforward" method I can see is replacing the whole menu each time

A menu has a popup that holds the items. You can make "normal" jquery remove and append calls on the popup (it is a jQuery node). For instance, this adds an item: menu.popup.append(new_item) and this removes the second item: menu.popup.children().eq(1).remove(). See https://github.com/pyscript/ltk/blob/main/ltk/widgets.py#L858 (edited)

ltk/ltk/widgets.py at main · pyscript/ltk

LTK is a little toolkit for writing UIs in PyScript - pyscript/ltk

1

Chris Laffra

LTK was covered by the RealPython Podcast this week. LTK (and PyScript/Anaconda) received nice feedback from the podcast hosts. Today, I recorded a full hour podcast with them on Communication skills, PySheets, MicroPython, PyOdide, PyScript. That podcast will be published some time in October. See episode 220 for LTK: https://realpython.com/podcasts/rpp/220/#t=2658 (edited)

I incidentally listened to that episode earlier this week and heard the praise of ltk which was nice to hear. I look forward to the episode you have recorded with them. It was a real python article about an early version of pyscript that brought it to my attention.

1

Guys, just discovered Nicegui https://nicegui.io/documentation (not sure if this was discussed) - but looks cool. Maybe take a few pointers from this project.

NiceGUI Documentation

NiceGUI is an easy-to-use, Python-based UI framework, which shows up in your web browser. You can create buttons, dialogs, Markdown, 3D scenes, plots and much more.

1

mrc

Guys, just discovered Nicegui https://nicegui.io/documentation (not sure if this was discussed) - but looks cool. Maybe take a few pointers from this project.

Two things I like: (1) binding a UI element to a model and (2) nice default styling. One thing I do not like: the UI is entirely server-rendered and does not use Python in the browser at all. Conclusion: I would love to see some PRs for LTK for better default styling or for value binding (as a better React).

Based on suggestions by @allthangs!! I looked into add some form of Model-View-Controller support to LTK. Today I added a new class ltk.Model and enabled ltk.Text and ltk.Input as the first two View widgets that can be connected to a model. See the example in the KitchenSink called "MVC": https://pyscript.github.io/ltk/?tab=14

1

22:48

Also quite interesting is ltk.LocalStorageModel that automatically saves changes in models into HTML localStorage. That makes creating a Todo app very easy: https://pyscript.com/@laffra/todo-app/latest?files=model.py (edited)

23:01

when i upgrade from pyscript 2024.10.1 to 10.2, I get this error in ltk. it goes away if i revert back to 10.1

Traceback (most recent call last):
  File "/lib/python312.zip/_pyodide/_base.py", line 523, in eval_code
    .run(globals, locals)
     ^^^^^^^^^^^^^^^^^^^^
  File "/lib/python312.zip/_pyodide/_base.py", line 357, in run
    coroutine = eval(self.code, globals, locals)
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "<exec>", line 2, in <module>
  File "/lib/python3.12/site-packages/floofbytes/webui/manager.py", line 25, in __init__
    self.menu_cont = ltk.Menu("Containers")
                     ^^^^^^^^^^^^^^^^^^^^^^
  File "/lib/python3.12/site-packages/ltk/widgets.py", line 860, in __init__
    self.label.on("click", proxy(lambda event: self.show(event)))
  File "/lib/python3.12/site-packages/ltk/widgets.py", line 314, in on
    return self.element.on(events, selector, data, proxy(handler))
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "http://localhost/jquery/jquery-3.6.0.js", line 5906, in on
  File "http://localhost/jquery/jquery-3.6.0.js", line 5181, in on
  File "http://localhost/jquery/jquery-3.6.0.js", line 207, in each
  File "http://localhost/jquery/jquery-3.6.0.js", line 385, in each
  File "http://localhost/jquery/jquery-3.6.0.js", line 5182, in on/<
  File "http://localhost/jquery/jquery-3.6.0.js", line 5266, in add
TypeError: Expected callable

Chris Laffra

Click to see attachment 🖼️

Not sure why it's showing error message?

zobi

Not sure why it's showing error message?

@zobi That probably happened because I was actively editing that example while you were looking at?

1

CyberneticDaisy

when i upgrade from pyscript 2024.10.1 to 10.2, I get this error in ltk. it goes away if i revert back to 10.1

Traceback (most recent call last):
  File "/lib/python312.zip/_pyodide/_base.py", line 523, in eval_code
    .run(globals, locals)
     ^^^^^^^^^^^^^^^^^^^^
  File "/lib/python312.zip/_pyodide/_base.py", line 357, in run
    coroutine = eval(self.code, globals, locals)
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "<exec>", line 2, in <module>
  File "/lib/python3.12/site-packages/floofbytes/webui/manager.py", line 25, in __init__
    self.menu_cont = ltk.Menu("Containers")
                     ^^^^^^^^^^^^^^^^^^^^^^
  File "/lib/python3.12/site-packages/ltk/widgets.py", line 860, in __init__
    self.label.on("click", proxy(lambda event: self.show(event)))
  File "/lib/python3.12/site-packages/ltk/widgets.py", line 314, in on
    return self.element.on(events, selector, data, proxy(handler))
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "http://localhost/jquery/jquery-3.6.0.js", line 5906, in on
  File "http://localhost/jquery/jquery-3.6.0.js", line 5181, in on
  File "http://localhost/jquery/jquery-3.6.0.js", line 207, in each
  File "http://localhost/jquery/jquery-3.6.0.js", line 385, in each
  File "http://localhost/jquery/jquery-3.6.0.js", line 5182, in on/<
  File "http://localhost/jquery/jquery-3.6.0.js", line 5266, in add
TypeError: Expected callable

That is strange. Let me try the kitchensink on 2024.10.2

Chris Laffra

@zobi That probably happened because I was actively editing that example while you were looking at?

You need to add delete items as well there is just adding items.

CyberneticDaisy

when i upgrade from pyscript 2024.10.1 to 10.2, I get this error in ltk. it goes away if i revert back to 10.1

Traceback (most recent call last):
  File "/lib/python312.zip/_pyodide/_base.py", line 523, in eval_code
    .run(globals, locals)
     ^^^^^^^^^^^^^^^^^^^^
  File "/lib/python312.zip/_pyodide/_base.py", line 357, in run
    coroutine = eval(self.code, globals, locals)
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "<exec>", line 2, in <module>
  File "/lib/python3.12/site-packages/floofbytes/webui/manager.py", line 25, in __init__
    self.menu_cont = ltk.Menu("Containers")
                     ^^^^^^^^^^^^^^^^^^^^^^
  File "/lib/python3.12/site-packages/ltk/widgets.py", line 860, in __init__
    self.label.on("click", proxy(lambda event: self.show(event)))
  File "/lib/python3.12/site-packages/ltk/widgets.py", line 314, in on
    return self.element.on(events, selector, data, proxy(handler))
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "http://localhost/jquery/jquery-3.6.0.js", line 5906, in on
  File "http://localhost/jquery/jquery-3.6.0.js", line 5181, in on
  File "http://localhost/jquery/jquery-3.6.0.js", line 207, in each
  File "http://localhost/jquery/jquery-3.6.0.js", line 385, in each
  File "http://localhost/jquery/jquery-3.6.0.js", line 5182, in on/<
  File "http://localhost/jquery/jquery-3.6.0.js", line 5266, in add
TypeError: Expected callable

I have been able to reproduce the problem and the latest version of LTK should help. Can you try your application with PyScript 2024.10.2 and the latest LTK? (edited)

https://bsky.app/profile/laffra.bsky.social/post/3lbpwyxz2kk2m

Chris Laffra (@laffra.bsky.social)

At #PyDataGlobal 2024, I am teaching a 90-minute tutorial on how to write a Todo app in the browser using PyScript LTK. Join me and learn how to write reactive UIs, and call OpenAI. All that in only 100 lines of Python and zero lines of JavaScript!

I hope to see you online on Dec 4.

Will the PyData talks be available for viewing after their scheduled time? I am thinking about signing up to attend the virtual conference, but your tutorial (and other talks) on Weds conflicts with a teaching obligation I have.

jimbom_nc

Will the PyData talks be available for viewing after their scheduled time? I am thinking about signing up to attend the virtual conference, but your tutorial (and other talks) on Weds conflicts with a teaching obligation I have.

Here are the recordings for 2020-2023. The recordings for PyData Global 2024 will end up there as well.

1

Ah, I see the talks here on YouTube, thanks!

17:36

https://www.youtube.com/@PyDataTV/playlists

PyData

PyData is an educational program of NumFOCUS, a 501(c)3 non-profit organization in the United States. PyData provides a forum for the international community of users and developers of data analysis tools to share ideas and learn from each other. The global PyData network promotes discussion of best practices, new approaches, and emerging techno...

1

jimbom_nc

Ah, I see the talks here on YouTube, thanks!

I forgot to paste the URL, but you found it yourself, I see

Hey, no worries. Without your prompting, I wouldn't have thought to look around on YouTube. So many great videos posted from DjangoCon and PyCon, should have thought to check there before asking.

LTK now has a built-in inspector. When you press Shift+Ctrl and move the mouse over a widget, LTK will show an inspector popup with details. If you run on PyOdide and develop using VS Code, you can even directly jump to the source code. Just add a line like the following to your code with the root of your project's source folder: ltk.window.development_location = "C:/Users/laffr/dev/todo/src" This is great for debugging, iterative development, learning, and explanation of a UI when doing a demo to stakeholders or peers.

1

https://github.com/laffra/slides

GitHub - laffra/slides

Contribute to laffra/slides development by creating an account on GitHub.

Chris Laffra

I have been able to reproduce the problem and the latest version of LTK should help. Can you try your application with PyScript 2024.10.2 and the latest LTK? (edited)

working fine with PyScript 2024.11.1 now

1

If the PYCON US submission system had voting buttons, I would ask you all to vote for this tutorial proposal

. For now, please comment on this post or like it on LinkedIN. This will help get this proposal approved, I am sure. https://www.linkedin.com/feed/update/urn:li:activity:7273759571817517056/

Chris Laffra on LinkedIn: I just submitted a tutorial to PYCON

US...

I just submitted a tutorial to PYCON

US

2025. You can learn from the creator (me) how to write a Python browser app using PyScript's Reactive LTK…

Hey everyone, I am very intruiged by LTK. I was wondering if anyone has attempted to use it as a frontend for another python framework such as Django, Flask, or FastAPI?

00:43

Or perhaps if it might be possible to use LTK in combination with Django's templating system (edited)

Very much interested in this also. Long time Django dev. I've just been looking at Ltk Kitchensink - the Reactive tab looks promising.

1

ltk looks awesome! I might give it a try for a project idea

FYI - The Reactive aspect of the ltk. Here's a demo project - mpy/py wit widget and reactive params. - https://pyscript.com/@neon22/starter-03-reactiveui/latest?files=main.py

How to make POST request without Proxy. It is working only when I use proxy. Else, I am getting CORS error. Any help?

please stop spamming every thread

magulan30

How to make POST request without Proxy. It is working only when I use proxy. Else, I am getting CORS error. Any help?

https://discord.com/channels/972017612454232116/1195794694622421082/1345078155790258222

Hi everyone, I recently discovered pyscript and ltk, and I think they are awesome projects. For one of my experimental apps, I've been trying to fetch some data from a third-party API with ltk.get(), but am constantly getting Cross-Origin Request Blocked: (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200 errors. Minimal example showing the error: https://pyscript.com/@doks5/test-url-check/latest?files=main.py I am clearly doing something wrong, so any hints how to fix the error will be much appreciated Thanks

Andy

Hi everyone, I recently discovered pyscript and ltk, and I think they are awesome projects. For one of my experimental apps, I've been trying to fetch some data from a third-party API with ltk.get(), but am constantly getting Cross-Origin Request Blocked: (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200 errors. Minimal example showing the error: https://pyscript.com/@doks5/test-url-check/latest?files=main.py I am clearly doing something wrong, so any hints how to fix the error will be much appreciated Thanks

for fetch try this: https://docs.pyscript.net/2025.2.4/api/#pyscriptfetch for mini-coi try this: https://docs.pyscript.net/2025.2.4/user-guide/workers/#option-1-mini-coi

I am trying to learn ltk, I have some very basic questions if anyone has a few minutes

Ask away

21:39

Have you seen the kitchensink ? - https://pyscript.github.io/ltk/?tab=2&runtime=mpy

I have seen kitchen sink, it is too large for me to easily understand

each page is its own code. Have a look at this instead then: https://pyscript.com/@neon22/starter-02-ltkui/latest and then https://pyscript.com/@neon22/starter-03-reactiveui/latest trying to get them into examples

that is very, very, very kind of you thanks

Watch this in-depth PyData Global 2024 tutorial on how to write a web app in PyScript. It highlights the use of LTK and shows a couple of applications that leverage both MicroPython and PyOdide, use external JS libraries, and import packages from PyPI. https://www.youtube.com/watch?v=J2XOSdDWPIo

PyData

Chris Laffra - PyScript - Writing a Python application in the brows...

1

Hi, I have a project that uses ltk and works fine on Pyodide, but the moment I switch it to MicroPython, it throws an error

micropython.mjs:1 Aborted(Assertion failed: stringToUTF8Array expects a string (got symbol))
error.js:15 RuntimeError: Aborted(Assertion failed: stringToUTF8Array expects a string (got symbol))
    at abort (micropython.mjs:1:14749)
    at assert (micropython.mjs:1:9826)
    at stringToUTF8Array (micropython.mjs:1:30547)
    at stringToUTF8 (micropython.mjs:1:81432)
    at stringToUTF8OnStack (micropython.mjs:1:90640)
    at string (micropython.mjs:1:90806)
    at Object.ccall (micropython.mjs:1:91309)
    at Object.get (micropython.mjs:1:112548)
    at Proxy.toString (<anonymous>)
    at w (jquery.min.js:2:986)

The package versions that the project uses are:

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

https://pyscript.net/releases/2025.2.3/core.css
https://pyscript.net/releases/2025.2.3/core.js

https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery-ui@1.14.1/dist/jquery-ui.min.js
https://cdn.jsdelivr.net/npm/jquery-ui@1.14.1/dist/themes/base/jquery-ui.min.css

Has anyone else observed similar behaviour?

I'm using jquery-ui 1.13.2 I have had bugs similar to this where I am not using pyscript.ffi.to_js properly. This kind of error points (I think) to not sending python data back to JS side in proper form. Having said that I also had some difficulty with images, videos and SVG when I was using ltk.Image for example. Try commenting out portions of the UI until it works maybe...

21:50

expects a string - got a symbol is your primary indicator

Well, I managed to reproduce the error with just this: https://pyscript.com/@doks5/mpy-vs-py-test/latest?files=main.py,index.html,pyscript_pyodide.toml,pyscript_mpy.toml Which makes things even more confusing, and now I'm thinking, if something with the browsers that I'm using could be causing the issue.

Andy

Well, I managed to reproduce the error with just this: https://pyscript.com/@doks5/mpy-vs-py-test/latest?files=main.py,index.html,pyscript_pyodide.toml,pyscript_mpy.toml Which makes things even more confusing, and now I'm thinking, if something with the browsers that I'm using could be causing the issue.

OK. I changed one line: ltk.Paragraph("MicroPython VS Pyodide").appendTo(ltk.window.document.body) instead of: ltk.find("body").append(ltk.Paragraph("MicroPython VS Pyodide"))

1

11:44

A massaged clone of yours is here with a slightly diff initialization approach. https://pyscript.com/@neon22/mpy-vs-py-test-copy/latest?files=main.py,index.html I would suggest you have a look at this tutorial demo I made. Its for making non-demo ltk based apps with Reactive UI elements: - https://pyscript.com/@neon22/starter-03-reactiveui/latest

1

11:46

also suggest you move to 2025.3.1 core in index.html.

1

Thank you!

Andy

Thank you!

Oh yeah - and please let me know how you get on with PDF.js. I see you have an esm version. You can load it with js.modules for easier access via python (not sure if pyodide only or not). jsmodules docs here: https://docs.pyscript.net/2025.3.1/user-guide/configuration/#javascript-modules I used fpdf2 a pypi package (so pyodide only) in toml as packages = [ "pyscript-ltk==0.2.20", "fpdf2==2.8.1"] but pdf.js may be much better

Andy

Thank you!

Actually you lib pdf.js reads pdfs and my example 'fpdf2' is actually about writing pdfs. So no real comparison. how did you get on

Neon22

Actually you lib pdf.js reads pdfs and my example 'fpdf2' is actually about writing pdfs. So no real comparison. how did you get on

Unfortunately, I've been busy at work, and haven't had time to work on it. Will ping you when I have some progress.

Original message was deleted or could not be loaded.

Does spam like this actually work? I doubt you'll find any success here.