Data Model for web-based video editing

I'm developing a web video editor that users can edit videos through a timeline interface that's similar to the red rectangle part in the following picture.

To achieve this I think there should be a tree-structured data model in the server side to maintain all the data used for editing operations, as shown in the following diagram.

Taking the interface picture as an example, there is one timeline object that has one Video sub-object and one Audio sub-object. The Video object has a collection of 2 Track objects, namely Video 1 and Video 2. The Audio object has 1 Track objects named Audio 1. The first Track object of the Video object has a collection of 6 Media objects, the second Track object has 4. While the only one Track object of the Audio object doesn't have any.

In the back end of my application, the data model is used for it to perform the actual editing operations. In the front end, it should be displayed on the web page in a graphical way like what's shown in the interface picture. In order to achieve this goal, I'm wondering that since there is already a data model in the server end, do I need to create a correspond JavaScript data model in the client side? If not, the front web page need to reload the data model from the back-end every time the user has done the editing operation that modifies it in order to its updated version to the end user. Is it OK to go that way?