Introduction to Caplin Trader 4

Caplin Trader 4 (CT4) is a complete development suite for creating HTML5 trading applications. It is built on top of Caplin’s open-source BladeRunnerJS and provides an HTML layout framework, financial display components and financial domain APIs.


Usually, a completed app will get streaming data and trade services from the Caplin Platform. Here is a typical application built using Caplin Trader.

typical application

This would be a good time to point out that if you’re looking to build a typical trading app, such as FX Sales or a corporate treasurer FX application, then you might want to look at our fully featured applications built with CT4. They are called Motifs and offer a ready-made starting point that you can deploy and then extend with your own, specific functionality.

If you would like to find out more about BladeRunnerJS, visit


Trading applications tend to be very complex and have a large amount of JavaScript. To make it faster to develop and more cost-effective to maintain, we use BladeRunnerJS to split the entire application up into separate display components that can be built and tested in isolation. No lengthy whole-app reloads or problematic connections to back-ends, just refresh your component and go. These modules are called Blades. They include everything needed to implement that piece of functionality - HTML, JavaScript, CSS and other resources.

Here’s the FX Trade Tile from the app above in a workbench - A web page that stubs out any services needed with handy workbench tools so you can poke your component with data and any other events that could happen to your tile.

workbench picture from rc

Here’s the less exciting output from the tile tests that stub out the services with test fixtures. These fixtures verify that the FX Trade Tile is displaying the correct data for the specified input.

test output

Blades are simply a directory on your disk, with a specified directory structure that BladeRunnerJS understands.

Services and Events

Your component may want to access data from a shared resource such as a pricing stream from the server or get an event from another component, say for example when a global account selection has changed. The Service Registry and Event Hub are provided by BladeRunnerJS for this purpose. Caplin Trader provides additional services used when building trading applications. Your component can access the service registry to start a Trade or pop out a trade tile into another window.


Each display component conforms to a standard Component API and we employ a "layout manager" to organise the components on the screen. You can easily drop in your own or 3rd party components, such as JQuery UI by adapting to our Component API.

The example at the top of the page uses Webcentric, which takes HTML page and makes it behave more like a rich desktop application. It allows the user to completely re-organise the layout by drag/drop, resize and stacking components. This allows the user to make the most of any screen real-estate they have and only show the parts of the application they are interested in. You can, of course, use your own layout manager. If you’re after an even simpler soluiton: just drop the UI components into an HTML page.

Pre-built components

We have a number of pre-built generic financial components that you can just add to the layout manager, configure up, and go. The grid library, for example, has been optimised for large fast-updating data sets with infinite scrolling and real-time, server-side filtering and sorting, all provided by the Caplin Platform. The Blotters in the example at the top of the page allow the user to sort and filter the blotter and have sub-second updates to the results. See here for other components.

Domain APIs

Included with Caplin Trader are libraries that can provide real-time streaming for prices and other fast-moving data, low-latency stateful messaging for trading and real-time entitlement information to deliver a better user experience.

What next?