Custom card development technologies

ThoughtFarmer is built on a .NET Core backend architecture utilizing ASP.NET MVC to serve core application data. The client-side interface operates as a React-based Single Page Application (SPA).  Rather than reloading the full DOM upon user interaction, the client application issues asynchronous REST API calls to fetch updated payloads, allowing React to re-render only the modified components. This client-side rendering model ensures high-performance interaction and a seamless user experience. 

Development technologies

The same core stack that powers ThoughtFarmer is exposed for building custom cards. Because cards undergo dynamic compilation within the browser runtime, the development workflow differs slightly from traditional desktop IDE compilation. All custom card source code is managed directly within the ThoughtFarmer card editor interface (Admin panel > Custom cards). For details please see Create and edit custom cards.

The following information will guide you through the technology options available.

HTML

Standard HTML can be added directly to the HTML tab of any custom card. This tab is ideal for defining static markup, building complex layout structures, or establishing DOM anchor nodes (stubs) that will be populated dynamically by the card's JavaScript or React execution loops.

JavaScript

ThoughtFarmer custom cards receive their script payloads from the server as string data. Upon receipt, the application executes these payloads via eval() within the client browser context.

Because scripts are executed dynamically rather than loaded via standalone JS files, standard source-mapping files are not present. To debug custom card scripts, you must include explicit debugger; statements within your code. Breakpoints will trigger automatically when browser Developer Tools (F12) are open.

To fetch server-side data within a custom card, developers can issue asynchronous AJAX requests to the native ThoughtFarmer REST API or interact directly with the client-side JavaScript API.

ReactJS

Custom cards fully support React component development. JSX templates provide a declarative framework for building interactive components rapidly within the card interface.

JSX syntax is supported natively within the custom card JavaScript workspace tab. ThoughtFarmer 9.0 and higher automatically transpiles all embedded JSX syntax into valid ES5/ES6 JavaScript for client-side execution—no external build tools, Node modules, or transpilers (such as Babel) are required.

CSS and SCSS

Visual styling for custom cards is managed within the CSS workspace tab. Both standard CSS and Sass (SCSS) syntaxes are natively supported.

Any SCSS rules or variables defined in this tab are automatically compiled into standard CSS by the application before being injected into the page layout.