Negligent Pachinko Machine


    0.2.7 • Public • Published

    React Transcript Editor

    A React component to make transcribing audio and video easier and faster.

    install size

    The project uses this github project board to organise and the co-ordinate development.

    --> Work in progress <--

    Development env

    Node version is set in node version manager .nvmrc


    Fork this repository + git clone + cd into folder

    Usage - development

    To start the development server (with entry point src/index.js), run

    npm start

    Visit http://localhost:3006

    Usage - production

    Available on npm - @bbc/react-transcript-editor

    npm install @bbc/react-transcript-editor
    import { TranscriptEditor } from '@bbc/react-transcript-editor';
        transcriptData=// Transcript json
        mediaUrl=// string url to media file - audio or video 
        isEditable={true}// se to true if you want to be able to edit the text
        sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
        fileName={ this.state.fileName }// optional*

    Note: fileName it is optional but it's needed if working with user uploaded local media in the browser, to be able to save and retrieve from local storage. For instance if you are passing a blob url to mediaUrl using createObjectURL this url is randomly re-generated on every page refresh so you wouldn't be able to restore a session, as mediaUrl is used as the local storage key. See demo app for more detail example of this./src/index.js

    System Architecture

    Uses create-component-lib as explaied in this blog post to setup the environment to develop this React component.

    This uses Create React App 2.0 so we are using CSS Modules to contain the scope of the css for this component.

    Place everything you want to publish to npm inside src/lib.

    Outside src/lib (but inside src/), you can create example web pages to test or demonstrate the usage of your components.


    There's a docs folder in this repository.

    docs/notes contains dev notes on various aspects of the project.

    docs/adr contains Architecture Decision Record.

    An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.

    We are using this template for ADR

    There also QA testing docs to manual test the component before a major release, (QA testing does not require any technical knowledge).


    To transpile src/lib and create a build in the dist folder, run:

    npm run build:component


    Demo can be viewed at

    Build - demo

    This github repository uses github pages to host a demo of the component, in docs/demo

    npm run deploy:ghpages

    add to git, and push to origin master to update

    Alternatively If you simply want to build the demo locally in the build folder then just

    npm run build:example


    Test coverage using jest, to run tests

    npm run test


    To push to npm - @bbc/react-transcript-editor

    npm publish:public

    This runs npm run build:component and npm publish --access public under the hood

    Note that only and the dist folders are published to npm.


    See guidelines and guidelines.



    Legal Disclaimer

    Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest.


    npm i @bbc/react-transcript-editor@0.2.7





    Unpacked Size

    146 kB

    Total Files


    Last publish


    • izzy-pickering
    • rjw57
    • geoffbbc
    • faithege
    • claydelas
    • sevisariisik
    • bennuttall
    • spencc05
    • jack_mcpoland
    • mcmanj04
    • langtonm
    • tomfranciswinnington
    • leihe
    • tamsingreen
    • chrispnicholson
    • newslabs-jenkins
    • sarahrainbow