<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Has anyone had success using openjscad in react?]]></title><description><![CDATA[<p dir="auto">There is next to no documentation for embedding an openjscad model into a web page, let alone putting one into a react component.  My first question is, has anyone successfully integrated an openjscad model into react?  My second question is, is there better documentation somewhere for putting an openjscad model into any web page?  When searching around, I found one library for using openjscad with vue, one for a jscad-gallery but its heavily intertwined with jeckyl, and the documentation for openjscad which is heavily focused on creating openjscad models and not integrating it into a web page.</p>
]]></description><link>https://openjscad.nodebb.com/topic/144/has-anyone-had-success-using-openjscad-in-react</link><generator>RSS for Node</generator><lastBuildDate>Sat, 07 Mar 2026 12:30:07 GMT</lastBuildDate><atom:link href="https://openjscad.nodebb.com/topic/144.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 31 Jul 2020 23:05:27 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Wed, 23 Sep 2020 21:01:01 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/1">@z3dev</a> thank you. For now I would only like create a viewer element within an angular application. Is there a release of v2 on the public npm registry? I've had a look but can't seem to find it. If not, please could you point me to instructions on how to build it? I'd like to host it on my private registry for the rest of the work I intend to do.</p>
]]></description><link>https://openjscad.nodebb.com/post/381</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/381</guid><dc:creator><![CDATA[noce2]]></dc:creator><pubDate>Wed, 23 Sep 2020 21:01:01 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Tue, 22 Sep 2020 23:55:08 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/391">@noce2</a> you will have to piece together the components but it should be possible to implement something in Angular. i'm sure you'll find some help in this user group.</p>
<p dir="auto">FYI, the V2 WEB UI uses 'most' which is a reactive framework based on the concept of 'streams'. So, Angular based components should be possible.</p>
<p dir="auto">So, what kind of functionality are you looking to implement? This is always the BIG question, as everyone has a different idea. I suggest starting out with small goals, and then add features once the new components start to mature.</p>
<p dir="auto">Please let us know where you will be working on the components. I'd like to follow along as I'm going to continue developing VUE components as well.</p>
]]></description><link>https://openjscad.nodebb.com/post/379</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/379</guid><dc:creator><![CDATA[z3dev]]></dc:creator><pubDate>Tue, 22 Sep 2020 23:55:08 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Tue, 22 Sep 2020 18:55:06 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/1">@z3dev</a> thanks for the explanation. I am actually looking to implement something similar for Angular. Please do you have any general recommendations on how it could be done? On the minimal viewer I can see that the minified version of the UI js library is loaded onto the page and the desired example linked to in the viewer context element. Is that all that's required?</p>
]]></description><link>https://openjscad.nodebb.com/post/377</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/377</guid><dc:creator><![CDATA[noce2]]></dc:creator><pubDate>Tue, 22 Sep 2020 18:55:06 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Fri, 07 Aug 2020 01:50:22 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/258">@kevinos</a> no problem.</p>
<p dir="auto">so, JSCAD designs are actually Javascript functions which perform calcuations, create geometry, perform operations with geometry, and finally return the geometry of interest.</p>
<pre><code>const {primitives} = require('@jscad/modeling')

const main = () =&gt; {
  let object1 = primitives.circle({radius: 22, segments: 36})
  object1.color = [1,0,0,1]

  return object1
}
module.exports = {main}
</code></pre>
<p dir="auto">The return of object1 from main() is a 2D geometry, i.e. a geom2 object. In the WEB UI, this object is passed to the 'rendering' function, and shows up on the screen as a red circle.</p>
<p dir="auto">The Vue component requires 2D/3D geometries as well. And as a Vue component, it can live inside another Vue component (or application). This is the rendering piece only.</p>
<p dir="auto">The JSCAD WEB UI is doing a whole lot more underneath. It loads all the code, evaluates (compiles?) each piece of code, and finally executes the main() function.</p>
<p dir="auto">If you want this functionality then there's some more plumbing required.</p>
]]></description><link>https://openjscad.nodebb.com/post/292</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/292</guid><dc:creator><![CDATA[z3dev]]></dc:creator><pubDate>Fri, 07 Aug 2020 01:50:22 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Wed, 05 Aug 2020 19:09:51 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/1">@z3dev</a> by V2 I assume you mean the V2 branch of the openjscad repo on github.  What do you mean by pre-compiled (JSON) design?  You won't insult my intelligence I'm fairly new to openjscad and web dev <img src="https://openjscad.nodebb.com/assets/plugins/nodebb-plugin-emoji/emoji/android/1f603.png?v=k4h1pp0pk3c" class="not-responsive emoji emoji-android emoji--smiley" title="=)" alt="😃" /></p>
<p dir="auto">Also, thank you for sharing, I did test locally and your project works.  Very exciting!</p>
]]></description><link>https://openjscad.nodebb.com/post/291</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/291</guid><dc:creator><![CDATA[kevinos]]></dc:creator><pubDate>Wed, 05 Aug 2020 19:09:51 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Wed, 05 Aug 2020 03:42:14 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/258">@kevinos</a> sure.</p>
<p dir="auto">here's the code <a href="https://github.com/z3dev/vue-components" rel="nofollow ugc">https://github.com/z3dev/vue-components</a></p>
<p dir="auto">this is only a viewer for a pre-compiled (JSON) design. <strong>V2 only!</strong></p>
]]></description><link>https://openjscad.nodebb.com/post/290</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/290</guid><dc:creator><![CDATA[z3dev]]></dc:creator><pubDate>Wed, 05 Aug 2020 03:42:14 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Tue, 04 Aug 2020 20:18:28 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/1">@z3dev</a> Can you share your example with Vue?  This might possibly give me some clues, or I might just switch to Vue.</p>
]]></description><link>https://openjscad.nodebb.com/post/289</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/289</guid><dc:creator><![CDATA[kevinos]]></dc:creator><pubDate>Tue, 04 Aug 2020 20:18:28 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Tue, 04 Aug 2020 20:13:32 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/5">@gilboonet</a> Ah ok, well thank you.  So far I am able to embed openjscad into static pages, just have not been able to with react.</p>
]]></description><link>https://openjscad.nodebb.com/post/288</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/288</guid><dc:creator><![CDATA[kevinos]]></dc:creator><pubDate>Tue, 04 Aug 2020 20:13:32 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Tue, 04 Aug 2020 14:14:34 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/258">@kevinos</a> No, as I wrote on my first reply, I don't use React.</p>
]]></description><link>https://openjscad.nodebb.com/post/287</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/287</guid><dc:creator><![CDATA[gilboonet]]></dc:creator><pubDate>Tue, 04 Aug 2020 14:14:34 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Tue, 04 Aug 2020 11:36:13 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/5">@gilboonet</a> Is this with React?  I took the code in viewer-minimal.html, completely copied and pasted it into index.html  added in the div with id root for react to pickup and that is all.  I removed nothing from the example but it will not render.</p>
<p dir="auto">Just to be clear, I can get the view to render in a static html page, my question is more geared towards if anyone got it to render with react.  I'm specifically using react and react-dom and this is on google chrome 84.0.4147.105 if that matters</p>
]]></description><link>https://openjscad.nodebb.com/post/286</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/286</guid><dc:creator><![CDATA[kevinos]]></dc:creator><pubDate>Tue, 04 Aug 2020 11:36:13 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Mon, 03 Aug 2020 06:54:40 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/258">@kevinos</a> <img src="/assets/uploads/files/1596436428977-capture-d-%C3%A9cran-de-2020-08-03-08-30-51.png" alt="Capture d’écran de 2020-08-03 08-30-51.png" class=" img-responsive img-markdown" /> It works for me (I changed the design-url). This error is maybe due to the fact that your server sent html generated content for error 404 (or so on) instead of min.js.</p>
]]></description><link>https://openjscad.nodebb.com/post/285</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/285</guid><dc:creator><![CDATA[gilboonet]]></dc:creator><pubDate>Mon, 03 Aug 2020 06:54:40 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Mon, 03 Aug 2020 05:01:23 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://openjscad.nodebb.com/uid/258">@kevinos</a> There's no documentation on embedding because there far too many frameworks. However, as you already researched, there are people embedding JSCAD in webpages.</p>
<p dir="auto">Recently, I've been playing Vue, and have a simple Vue component which can render a JSCAD V2 geometry. It's kind of cute, but shows potential.</p>
]]></description><link>https://openjscad.nodebb.com/post/284</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/284</guid><dc:creator><![CDATA[z3dev]]></dc:creator><pubDate>Mon, 03 Aug 2020 05:01:23 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Mon, 03 Aug 2020 02:13:02 GMT]]></title><description><![CDATA[<p dir="auto">Unfortunately there's an error, so it displays "Hello" since thats whats in the errordiv</p>
<p dir="auto"><img src="/assets/uploads/files/1596420707402-2f971367-3df4-479e-a01f-6b8a57bbbb74-image.png" alt="2f971367-3df4-479e-a01f-6b8a57bbbb74-image.png" class=" img-responsive img-markdown" /></p>
]]></description><link>https://openjscad.nodebb.com/post/283</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/283</guid><dc:creator><![CDATA[kevinos]]></dc:creator><pubDate>Mon, 03 Aug 2020 02:13:02 GMT</pubDate></item><item><title><![CDATA[Reply to Has anyone had success using openjscad in react? on Sun, 02 Aug 2020 08:48:21 GMT]]></title><description><![CDATA[<p dir="auto">Hello, I cannot help with react as I don't use it. Did you take a look at viewer-minimal.html (<a href="https://github.com/jscad/OpenJSCAD.org/blob/master/packages/web/viewer-minimal.html" rel="nofollow ugc">https://github.com/jscad/OpenJSCAD.org/blob/master/packages/web/viewer-minimal.html</a>) ? It was my starting point to integrate jscad into web pages.</p>
]]></description><link>https://openjscad.nodebb.com/post/282</link><guid isPermaLink="true">https://openjscad.nodebb.com/post/282</guid><dc:creator><![CDATA[gilboonet]]></dc:creator><pubDate>Sun, 02 Aug 2020 08:48:21 GMT</pubDate></item></channel></rss>