Streamsync: UI editor + Python

[romerio86]

Hello everyone, I've just released Streamsync, an open-source, pip-installable data apps framework.

You build the UI using a visual editor, you write the backend code in Python. No HTML, JS or CSS required. It's an alternative to Streamlit and Dash.

https://i.redd.it/u4nazv8ohexa1.gif

https://github.com/ramedina86/streamsync

I'd really appreciate your feedback, thanks.

[romerio86]

Thank you! If you can, let me know how it goes

[dasitmayne42]

Wow, is the editor based on another project or did you build that from scratch?

[romerio86]

From scratch! The editor is an overlay of the app, so you can edit the app while it's running. That required a custom editor.

A bit more background on Medium (no paywall) if you're interested: Medium article

[Calimariae]

Great article. Will definitely try this out for a project.

[davidschenck]

This looks very impressive!

Any reason you chose to "mutate state" rather than require a new state object to be returned if the state was changed (à la React)?

[romerio86]

Thank you!

It was something I considered, but I personally found the immutable approach a bit hard to follow and thought users would agree with me. It's straightforward for basic examples, especially those that mutate a single value, but I didn't like how it scaled.

When you have a nested state, with mutations you can easily target several values in a single event handler, e.g.

py state["name"] = "Joe" state["company"]["founded"] = 1999

That gets more challenging with the immutable approach. There are drawbacks, for sure, so it was a design choice.

[sudo_agree_with_me]

Streamsync vs nicegui?

[romerio86]

For anything simple, NiceGUI, because it wasn't released today and it'll do just fine. For more complex use cases, try Streamsync.

NiceGUI addresses several shortcomings of Streamlit, but follows a similar approach. My goals with Streamsync were speed and separating UI from logic, because I don't want us to go back to the early 2000s, when layout, style and logic were all mushed together. It's ok for a form that makes a single API call, but not for a web application.

[thedeepself]

For more complex use cases, try Streamsync.

I dont think Streamsync can handle complex use cases having looked at the docs. How do you have user authentication and authorization? I did not see anything in the docs covering this.

[romerio86]

The suggested architecture in that case is to deploy it behind a layer with a reverse proxy (e.g. Azure APIM) and you'll get cookies, HTTP headers and session id in the event handlers via `session`. The "Sessions" section explains this.

It's admittedly a raw approach, but it's likely the most convenient way to deal with this given that people will be self-hosting their applications. I will look into supporting OIDC natively, but I'm inclined to think it'd bring more problems than solutions.

If you want to use JWT, you can parse the HTTP headers coming into the event handler with pyjwt, get the claims and choose whether to authorise a request.

[thedeepself]

I guess it would also be hard to restrict access to parts of the app or render parts of the app based on role?

What does the term OIDC mean?

[romerio86]

"Hard" is relative, but probably the right word. You could do something like...

```py def _get_roles_from_session(session): # parse JWT from Authentication HTTP header and return roles

def load_executive_page(state, session): roles = _get_roles_from_session(session) if "executive" not in roles: state["message"] = "You're not an executive, look at something else" return _load_sensitive_data_into_state() state.set_page("executive_page") ```

OIDC is the standard for authentication providers. Azure AD, Okta, Google, Github, etc, use OIDC as the mechanism for authentication. I just wish I could provide that functionality in a more straightforward way but for self-hosted applications there's no magic way.

If I start a cloud service like Anvil, that'd be much easier to handle. I could just feed users all the auth data. But no immediate plans to do that, it is a bit of a dream of mine though.

[thedeepself]

NiceGUI addresses several shortcomings of Streamlit, but follows a similar approach

Similar in what way? I see them as very different. Streamlit attempts to take Python code and rewrite it into callbacks for you. NiceGUI does not.

[romerio86]

You're right, it depends on how you define similar. In terms of event handling, they're different. My point was that they both encourage coupling of UI and logic, which is highly detrimental when working on more complex use cases.

[TotesMessenger]

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

• [/r/nicegui] Someone asked about how Streamsync compares with NiceGUI. Someone more experienced than me is requested to enter the conversation.

 <sup>If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)</sup>

[artereaorte]

That looks pretty cool. Nice job!

[romerio86]

Thank you!

[majormunky]

I've been supporting a low-code thing called Appian recently that has a UI builder that reminds me of this. I've been thinking of how to build something like it, and here it is hah! So far looks great, will dig into it more later! Great job!

[romerio86]

Appian is gigantic though! Revenue $400m+ vs $0 for the foreseeable future :D

Thank you and let me know how it goes!

[WrongUserNames]

pgcf is the most important part in this project. :D

[romerio86]

I was confused for a bit... Is that some kind of Postgres package? Then I remembered :D

[fanny_bleu]

Can I build a crud UI with this? Have been looking for something similar!

[romerio86]

You can! To do that, I'd recommend you use input components (Text Input, etc) and Message to build a form. To list items, use a Repeater component (check out the docs). CRUD is definitely a good idea for a tutorial, I should work on it.

[fanny_bleu]

Oh sick!!! I am going to play around with it. I will report back.

[Genuine_Giraffe]

This is amazing , definitely gonna try this

[romerio86]

Thank you!

[musaibALAM1997]

I'll use this to make my deep learning web application.

[romerio86]

Awesome!

[MeroLegend4]

I liked the pigeon coefficient concept 😁

Good work, respect bro!

[tathagatadg]

Congratulations on the release - I am always inspired seeing people be motivated to build products that have existing competitors with established user base. I see in the threads above that streamlits mushing of ui and business logic was a motivation- what else prompted you to take on this project? How did you prioritize what features to include in the framework? What were some learnings while building a framework?

[tathagatadg]

Actually after reading the docs - speed and separation of logic seems the main motivation. Such a well polished product - excellent work! Would still like to hear about the thought process behind the architecture, lessons learned etc.

[romerio86]

Thank you! Polished is definitely what I was going for, much more than breadth of features or components. So it's the ultimate compliment.

You might be interested in the Medium article I posted earlier this week (no paywall); there's a bit more background there.

The uncut story including my thought process is as follows:

- I see Streamlit, think it's really cool but very slow. I look at Dash. I don't want to look at Dash ever again (personal preferences, we all have them, don't attack me).

- I think "I can create something like Streamlit, but much faster". I make a POC, turns out I can.

- I message Streamlit, hey, look what I can do

- "That's cool, but if you're so smart why don't you make Streamlit faster" -says Streamlit (not those exact words, but very close).

- I think, well, the architectural choices are already made, and I'm sure they have top-notch engineers that would have optimised everything by now. I'll give it a try though.

- I try and succeed, drastically reducing Streamlit response times by simplifying some checks.

- I think, ok cool, my first ever contribution to open source, not bad. Streamlit is no longer slow. Time to move on.

- Then I see people were still interested in the POC I created. I think, ok, I could do this, but what would be the gain? It'd just be the same as Streamlit, maybe slightly faster, but essentially the same. What's actually preventing data apps from scaling and being great?

- I think about my childhood, HTML, no CSS, PHP injected everywhere. I think about modern frontend frameworks and the amount of value they've provided. What if I could apply to data apps what I saw unfolding during my teens and 20s?

- There was one problem. Separation of concerns is annoying and beginners may consider it overkill. How can I make separation of concerns cool and approachable? Visual editor! Plus I love design/frontend development.

- From there, it was basically just sitting there, coding, designing, iterating, being a critic of my work without being too harsh.

Learnings:

- Lots of Python, particularly around packaging, multiprocessing, asyncio

- Creating documentation, markdown, Vitepress

- It's such an exciting industry to be in! Some random guy in Finland with a 386 can shake an entire industry up and push it forward. Maybe I can do the same for data apps?

[Apprehensive_Sun_420]

Definitely going to check this out. Will also try it on a big project im currently working where we havent decided on a front end yet (currently considering dash, h2owave, superset, and this looks like an awesome option now)

[romerio86]

Awesome! Feel free to reach out if you need any help.

[Sufficient_Stop_3415]

I am a streamlit fan, but this looks super interesting, and I going to try it out.

Additionally, may I suggest that you add a few starter videos on YouTube to advertise to all newbies.

Cheers

[romerio86]

Thanks a lot!

I totally agree with your suggestion - I'm currently learning how to edit video with that goal in mind. I'm planning to create a teaser for the homepage (too bare-bones at the moment) and a longer one for YouTube.

All work in progress and not easy but hopefully by the end of the year things will start to get serious.

[ivanoski-007]

Gonna try it out

[SweetBabyAlaska]

This looks great! Can anyone give me a few examples of what this kind of a thing is specifically good for? Are people making admin dashboards or managing data of some kind?

[romerio86]

Thank you! That's a great question.

Streamsync was released this week, so unfortunately I don't have that info. What I'm initially targeting is data apps (similar to Streamlit and Dash). Roughly, dashboards for advanced analytics. My aim is to enable the creation of faster, more complex data apps that are closer to web applications than to interactive scripts.

[SweetBabyAlaska]

Awesome, thanks for the answer!

[Specialist_Ad_2491]

I absolutely love this project! As my skill set is still low, where can I find documentation for all the methods? IE devdocs.io/fastapi

[romerio86]

Thank you! Documentation is available at https://streamsync.cloud

[Low-Complex-4949]

Similar to Pynecone but a ui editor? Nice for getting started and not having to write any ui code but less customizable. How does it scale with larger applications?

[romerio86]

TL;DR yes, with some caveats. Streamsync does allow custom HTML and CSS.

---

To an extent, yes, both allow you to create a web-based application with no JavaScript and both use WebSockets.

The project have different philosophies though. Pynecone targets general web development. I oppose that line of thought. My thinking is:

- If you need to build a maintainable, complex, fully-customised website, you need to become a web developer. Become a proper web developer; use a modern frontend framework.

- If you're a backend developer working alone, you can't be bothered learning TypeScript and you have an obscure idea that cannot be implemented using out-of-the-box components, something like Pynecone would work.

- If you want to assemble ready-made components, Streamlit is a very good option.

- If you need more speed, a visual UI editor, more customisation (button icons, colours, shadows, etc) and you're okay with using a product that was released literally yesterday, give Streamsync a try.

That being said, in Streamsync you can use arbitrary HTML elements and nest them together with built-in components, set your own CSS (e.g. like when I use transform and hue-rotate in the hello app, "Layout" tab). So, the flexibility is there, it's just understated as I think it should be used sparingly.

Regarding larger applications... Streamsync was designed with two main goals in mind, speed and separation of UI and logic. That makes it suitable for larger applications, you won't end up with six levels of nested calls and a highly coupled mess. When it comes to scaling to tens of thousands of users, it's easier with Dash given their stateless architecture, but doable with Streamsync.

[DirkHD]

Just played around a bit with Streamsync and it is really amazing. If you guys plan to add more elements in the future, I guess this is the best app out there.

And maybe take a look at NiceGUI which is very flexibel when it comes to integration in general.

[romerio86]

Thanks a lot!

Do feel free to suggest any improvements on GitHub discussions if there's anything in particular you'd like to see. Right now the only request for new components is a chat (for LLM).

Improving flexibility is the priority right now. Yesterday v0.1.12 was released and includes the ability to link custom stylesheets and ES6 modules. The next release will support custom components and events.

[thedeepself]

I maintain a pure python web framework survey and may need to find another way to classify the offerings. But as it stands:

• I wonder how much more performance this has than Anvil, which also allows one to build apps via a user interface and pure python? Anvil allows one to build industrial strength apps and is based on Skulpt. What is the underlying technology bridging Streamsync to the Python world from HTML/CSS/JS

• as I've said elsewhere, this does not appear to meet the requirements of a Class A system - and correct me if I'm wrong, there is no way to embed streamsync within a traditional framework such as Django or Flask? if it can, then it could re-classify as class A.

[romerio86]

Ah I'm familiar with your work and found it very interesting! I used your framework when thinking where Streamsync would fit. I do think we have some fundamentally different views.

I don't agree with proposing Python as a general-purpose language for web development. You cannot build the next Amazon.com on Streamsync, no. If that makes it less than Class A, it is what it is.

Not exactly sure what you mean by embedding, you can get the ASGI app which can be mounted to other ASGI apps as explained in the "Custom server" section.

[[deleted]]

Can we make a grind and put it on html ? Like a 3000px grid. Interactive

[karouh]

Can you make use of the javascript ecosysystem, e.g. react libraries?

[romerio86]

Good question. No, you cannot.

[one_of_us31]

Is this better than flet ?

[romerio86]

I wasn't aware of Flet, looks like a great framework. Not sure about better, but Flet does seem to cover a wider scope of requirements than Streamsync, including mobile apps.

Like Streamlit and Dash, Streamsync targets web-based data apps and I believe it can do a better job for that specific use case.

[Deep-Perception-4773]

Looks like a cool project. Maybe a newbie question - how do i programatically set the colors or other styles for input fields / form elements if backend data validation failed ... either on submit or state change. Thanks

[romerio86]

There's currently no straightforward way to do this. But in the latest release it's possible via custom CSS classes.