Hi All, This is my second post about this but I’m trying to embed a 3js viewer in my streamlit app and am having trouble. The viewer just doesn’t render. What is the solution to this? Thanks import streamlit as st import streamlit.components.v1 as components html_string = ''' <h1>HTML</h1> <scr…

I dont know if this has been answered, but st.markdown doesnt execute javascript code. I believe there is a custom component that does (I will try to find it and edit this comment). Edit: So I was thinking of another component, but the component.html should execute javascript fine. I think you fo…

Hi @bouzidanas , Thanks for the reply, I tried components, but it didn’t work. I don’t think I am missing any imports because I used this same code in my flask application and it worked fine. This is what I tried. import streamlit as st import streamlit.components.v1 as components components.html…

According to the console, something is wrong with the imports you added (response code 500). I just tested an example I have to see if I can get ThreeJS working and it works. The example: import streamlit as st import streamlit.components.v1 as components components.html(''' <style> * { …

Hi @bouzidanas , Looks like theres some progress but still not showing up anything. So I imported the libraries properly. Theres no visible errors so I’m not sure. The 3dm is in the same folder as my .py import streamlit.components.v1 as components components.html(''' <script src="//cdnjs.cloudf…

I think there are multiple issues now. Change, THREE.Object3D.DEFAULT_UP.set( 0, 0, 1 ); to THREE.Object3D.DefaultUp.set( 0, 0, 1 ); and then the next issue is that output.3dm is not found [Screenshot 2023-06-26 212420] you might have to straight up include the contents or figure out where to…

Yea I’m not sure how to include it straight up because I don’t think it’s possible, is there another way to reference the file?

Thanks for the help @bouzidanas I might just skip this and not pursue this issue further as streamlit currently just lacks the capabilities, but hopefully JS becomes more easily usable within streamlit Thanks for all your help.

[image] rivindub: I’m trying to embed a 3js viewer in my streamlit app and am having trouble. The viewer doesn’t render. What is the solution to this? Hi fren, I believe the issue you’re facing is that the JavaScript code within the HTML string is not executed properly within the Streamlit a…

Hi @ShivamAgarwal-code , I tried doing this however it seems like the output is just text of the js code on the streamlit website. Thanks

3JS Viewer in Streamlit

Using Streamlit

bouzidanas June 27, 2023, 3:57am 9

I think this comment might provide a solution. Alternatively, you can put the file somewhere in the cloud where you can access it by url and that might be a better solution.

Topic		Replies	Views
Rhino3DM 3JS viewer in Streamlit Using Streamlit	2	857	June 23, 2023
Adding glb file with 3js in streamlit? Using Streamlit streamlitbot , build-with-streamlit , discussion	4	656	February 4, 2025
Include javascript file in streamlit component for htmt render Custom Components	3	3166	May 12, 2021
Embed a 3D (VTK) visualization app and drive it with Streamlit Using Streamlit	10	8765	October 18, 2023
Trying to get a pyvista 3D view Community Cloud	1	1241	September 9, 2022

3JS Viewer in Streamlit

Related topics