# React Caspar Client

**URL:** <https://casparcgforum.org/t/react-caspar-client/4375>\
**Category:** General\
**Tags:** template, client, html\
**Created:** [August 13, 2021, 2:19pm UTC](https://casparcgforum.org/t/react-caspar-client/4375 "2021-08-13T14:19:58Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [August 13, 2021, 2:19pm UTC](https://casparcgforum.org/t/react-caspar-client/4375/1 "2021-08-13T14:19:58Z")

</div>

Note:- This post have been updated. Last update 06.04.02024  
Online Client [https://vimlesh1975.github.io/ReactCasparClient/](https://vimlesh1975.github.io/ReactCasparClient/)  
Online 3d client [https://vimlesh1975.github.io/three/](https://vimlesh1975.github.io/three/)  
Online RCC Web Animator [https://vimlesh1975.github.io/ReactCasparClient/WebAnimator](https://vimlesh1975.github.io/ReactCasparClient/WebAnimator)  
Game client with RCC templates [https://bit.ly/3PCcHP6](https://bit.ly/3PCcHP6)

Dear forum  
I want to share an work in progress ‘React Caspar Client’. This is for learning web based technology. This works on every version of casparcg. But All features will work only on 2.3  
How to test=\>

1. We need to have already installed nodejs in PC.
2. Download and unzip with 7z. [Microsoft OneDrive](https://bit.ly/4877FGu)
3. Right Click and Run As Administrator the file in root folder Right\_Click\_Run\_As\_Administrator.bat
4. Double click on Start\_Both.bat file.
5. Use server [Server dated 23.11.23](https://drive.google.com/file/d/1V1LZWQmss2O4gqG5wVSHLuW2J9Y8SDoj/view?usp=drive_link)

 ![Untitled](https://casparcgforum.org/uploads/default/original/2X/b/b0ecf95606dca2ebe401b95f4d802bcc0c58f24d.png)

https://www.youtube.com/embed/Sqju82-brlI?feature=oembed&wmode=opaque

---

<div class="post-metadata">

**Author:** ![markusnygard](https://casparcgforum.org/user_avatar/casparcgforum.org/markusnygard/32/8_2.png) [@markusnygard](https://casparcgforum.org/u/markusnygard)\
**Post date:** [August 14, 2021, 8:36am UTC](https://casparcgforum.org/t/react-caspar-client/4375/2 "2021-08-14T08:36:03Z")

</div>

WOW  
Super work

---

<div class="post-metadata">

**Author:** ![lzx1995](https://casparcgforum.org/user_avatar/casparcgforum.org/lzx1995/32/1004_2.png) [@lzx1995](https://casparcgforum.org/u/lzx1995)\
**Post date:** [August 18, 2021, 6:38am UTC](https://casparcgforum.org/t/react-caspar-client/4375/3 "2021-08-18T06:38:22Z")

</div>

It’s great. I have been waiting this for a long time. finally someone made one!!

---

<div class="post-metadata">

**Author:** ![stemcc](https://casparcgforum.org/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@stemcc](https://casparcgforum.org/u/stemcc)\
**Post date:** [August 27, 2021, 8:24pm UTC](https://casparcgforum.org/t/react-caspar-client/4375/4 "2021-08-27T20:24:30Z")

</div>

I’ve been enjoying playing around with this client!

Have you considered putting the code up on github so others might be able to contribute?

---

<div class="post-metadata">

**Author:** ![pmart868](https://casparcgforum.org/user_avatar/casparcgforum.org/pmart868/32/342_2.png) [@pmart868](https://casparcgforum.org/u/pmart868)\
**Post date:** [August 27, 2021, 9:24pm UTC](https://casparcgforum.org/t/react-caspar-client/4375/5 "2021-08-27T21:24:21Z")

</div>

Great work again Vimlesh. Working good… working good.  
GOD bless.

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [August 28, 2021, 7:26am UTC](https://casparcgforum.org/t/react-caspar-client/4375/6 "2021-08-28T07:26:24Z")

</div>

Thanks everybody for encouraging words.  
I am new to github and now code has been published at [GitHub - vimlesh1975/ReactCasparClient](https://github.com/vimlesh1975/ReactCasparClient)

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [September 5, 2021, 8:13am UTC](https://casparcgforum.org/t/react-caspar-client/4375/7 "2021-09-05T08:13:37Z")

</div>

A github link to the client to test.  
[https://vimlesh1975.github.io/ReactCasparClient/](https://vimlesh1975.github.io/ReactCasparClient/)

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [September 21, 2021, 2:57pm UTC](https://casparcgforum.org/t/react-caspar-client/4375/8 "2021-09-21T14:57:30Z")

</div>

Now much improved.  
Features:-  
• Template is based on SVG so quality is good.  
• Web based front end and remote operation is available.  
• Designer and play out in same interface, useful for live and instant operation.  
• Designer has Zoom and pan facility to design roll and scroll.  
• Multi pages can be saved and all pages can be saved in single file.  
• Multi instance can be opened of this application.  
• Design can be done on normal pc. For output Casparcg is required.  
• Multi channel operation is available like preview channel and program channel.  
• Frame animation, four point animation, full fledges animation.  
• Export and import Svg, Json, png, html.  
• Export html and use it from any other client.  
• Demo file included in download which have all type of templates.  
• Works on every resolution.  
• Start\_both.bat file is included in download, which will act as shortcut for starting application.  
• Up and down timer, Game timer..  
• Simple Sports client- Hockey, Tennis, Kabaddi score, cricket score.  
• Video and other software exported animated video play out in background.  
• Automation feature to trigger graphics from self made software.  
• Multi bullet scroller.  
• Property status feedback of elements.  
• Works in Unicode and non Unicode both.  
• External JS and CSS file can be linked to exported HTML file for more advanced logic.  
• Text alignment and shrink to fit by default.  
• Class name can be given to elements for latter manipulation by external css and js file.  
• Simple 3D designer and player with animation.  
• Drag and drop image or text to Designer, clipboard paste to designer.  
• Multilayer Html output for use in VMIX and OBS.  
• Open AI support for getting help for design.  
• Multilingual speech to text for text editing.  
• Multicolor gradient with alpha.  
• RCC Web Animator  
• Gsap Player  
• Tsparticles

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [September 24, 2021, 2:06pm UTC](https://casparcgforum.org/t/react-caspar-client/4375/9 "2021-09-24T14:06:43Z")

</div>

Caspar is great. New method to work with. Virtual html template.  
Surprisingly If we copy and paste bellow content to casparcg console, we get UpTimer.

```auto
play 1-115 [HTML] xyz.html
call 1-115 " var aa = document.createElement('div'); aa.style.position='absolute'; aa.innerHTML='<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\" ?> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"1024\" height=\"576\" viewBox=\"0 0 1024 576\" xml:space=\"preserve\"> <desc>Created with Fabric.js 4.6.0</desc> <defs> </defs> <g transform=\"matrix(1 0 0 1 66.99 544.13)\" style=\"filter: url(#SVGID_48);\" id=\"uptimer1\" > <filter id=\"SVGID_48\" y=\"-126%\" height=\"352%\" x=\"-46%\" width=\"192%\" > <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"15\"></feGaussianBlur> <feOffset dx=\"0\" dy=\"0\" result=\"oBlur\" ></feOffset> <feFlood flood-color=\"rgb(0,0,0)\" flood-opacity=\"1\"/> <feComposite in2=\"oBlur\" operator=\"in\" /> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in=\"SourceGraphic\"></feMergeNode> </feMerge> </filter> <rect fill=\"#50037c\" x=\"-56.99\" y=\"-14.13\" width=\"113.98\" height=\"28.25\"></rect> <text xml:space=\"preserve\" font-family=\"Arial\" font-size=\"25\" font-style=\"normal\" font-weight=\"bold\" style=\"stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; white-space: pre;\" ><tspan x=\"-56.99\" y=\"7.85\" >00:03:102</tspan></text> </g> </svg>'; document.body.appendChild(aa); document.body.style.margin='0'; document.body.style.padding='0'; aa.style.zoom=(102400/1024)+'%'; document.body.style.overflow='hidden'; var cc=document.getElementsByTagName('tspan')[0]; cc.textContent=''; var startTime = new Date(); setInterval(function() { var diff = (new Date()).getTime() - startTime.getTime(); var date_diff = new Date(diff - 30 * 60 * 1000); var ss1 = date_diff.toLocaleString('en-US', { minute: '2-digit', second: '2-digit' }) + ':' + String(date_diff.getMilliseconds()).padStart(3, '0'); cc.textContent =ss1; }, 40); "

```

---

<div class="post-metadata">

**Author:** ![didikunz](https://casparcgforum.org/user_avatar/casparcgforum.org/didikunz/32/7_2.png) [@didikunz](https://casparcgforum.org/u/didikunz)\
**Post date:** [September 24, 2021, 2:10pm UTC](https://casparcgforum.org/t/react-caspar-client/4375/10 "2021-09-24T14:10:26Z")

</div>

This is awesome!!!

---

<div class="post-metadata">

**Author:** ![venkatnimma](https://casparcgforum.org/letter_avatar_proxy/v4/letter/v/b9bd4f/32.png) [@venkatnimma](https://casparcgforum.org/u/venkatnimma)\
**Post date:** [October 29, 2021, 6:52am UTC](https://casparcgforum.org/t/react-caspar-client/4375/11 "2021-10-29T06:52:31Z")

</div>

Excellent Work Sir… 👏🏻 👏🏻 😊

---

<div class="post-metadata">

**Author:** ![chandrasekhar](https://casparcgforum.org/letter_avatar_proxy/v4/letter/c/34f0e0/32.png) [@chandrasekhar](https://casparcgforum.org/u/chandrasekhar)\
**Post date:** [November 1, 2021, 9:24am UTC](https://casparcgforum.org/t/react-caspar-client/4375/12 "2021-11-01T09:24:07Z")

</div>

excellent work vimlesh. we are waiting a caspar cg with designer from long time .it is accomplished because of you . Great Job vimlesh

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [November 1, 2021, 9:27am UTC](https://casparcgforum.org/t/react-caspar-client/4375/13 "2021-11-01T09:27:42Z")

</div>

Encouragement from people like you is the source of energy for this development.

---

<div class="post-metadata">

**Author:** ![samir\_assaad](https://casparcgforum.org/letter_avatar_proxy/v4/letter/s/43a26b/32.png) [@samir\_assaad](https://casparcgforum.org/u/samir_assaad)\
**Post date:** [November 27, 2021, 11:28am UTC](https://casparcgforum.org/t/react-caspar-client/4375/14 "2021-11-27T11:28:59Z")

</div>

very good react-caspar-client , i try this software is very easy and i like the layers how can control and how can use and we have many many many option for control and we can put video logo , and the time we can edit change background font everything and the scroll we can put text with logo and we have more option in software i need to thanks for the leader @vimlesh1975 about the great software 🌷 🌷

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [December 20, 2021, 7:47am UTC](https://casparcgforum.org/t/react-caspar-client/4375/16 "2021-12-20T07:47:18Z")

</div>

Style Creating and Applying in RCC

[![](https://img.youtube.com/vi/rCCkx79pxRQ/maxresdefault.jpg "Style Creating and Applying in RCC") ](https://www.youtube.com/watch?v=rCCkx79pxRQ)

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [December 21, 2021, 11:53am UTC](https://casparcgforum.org/t/react-caspar-client/4375/17 "2021-12-21T11:53:56Z")

</div>

Thumbnail\_Preview of canvaslist

[![](https://img.youtube.com/vi/Cm3Qn_Uaq6Q/maxresdefault.jpg "Thumbnail\_Preview of canvaslist") ](https://www.youtube.com/watch?v=Cm3Qn_Uaq6Q)

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [December 30, 2021, 5:19am UTC](https://casparcgforum.org/t/react-caspar-client/4375/18 "2021-12-30T05:19:07Z")

</div>

Shapes in RCC

[![](https://img.youtube.com/vi/nOJI-x7gBvk/maxresdefault.jpg "Shapes in RCC") ](https://www.youtube.com/watch?v=nOJI-x7gBvk)

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [January 15, 2022, 11:40am UTC](https://casparcgforum.org/t/react-caspar-client/4375/19 "2022-01-15T11:40:59Z")

</div>

Chart in RCC.

[![](https://img.youtube.com/vi/GokrcEEW9Es/maxresdefault.jpg "Chart with RCC") ](https://www.youtube.com/watch?v=GokrcEEW9Es)

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [January 17, 2022, 11:18am UTC](https://casparcgforum.org/t/react-caspar-client/4375/20 "2022-01-17T11:18:37Z")

</div>

Tennis and badminton in RCC

[![](https://img.youtube.com/vi/9T4Fplcl4lE/maxresdefault.jpg "Tennis and badminton in RCC") ](https://www.youtube.com/watch?v=9T4Fplcl4lE)

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [February 2, 2022, 2:51pm UTC](https://casparcgforum.org/t/react-caspar-client/4375/21 "2022-02-02T14:51:17Z")

</div>

RCC in Hindi

[![](https://img.youtube.com/vi/Y9SvL3CPjmw/maxresdefault.jpg "RCC in Hindi AudioLevel Ok") ](https://www.youtube.com/watch?v=Y9SvL3CPjmw)

[Next page](https://casparcgforum.org/t/react-caspar-client/4375.md?page=2)