simple editor for text styles

[lexoyo]

Being able to edit the styles available in the text editor, i.e. Title, Subtitle, Title 1, Title2, ... Normal text, Quotes

And also add other styles

[lexoyo]

Styles to be editable

• [x] text properties
• [x] text color
• [x] fonts
• [ ] overflow

Useful links

• HTML-based CSS Editor
• open source online css stylesheet editor
• illustrate the many ways you got to add a style to a text with
• CSS Style Editor - CSS Portal

[budislav]

I can't wait to see this! But I can't imagine how this will be written in css and html doc without some things I saw in grapesjs for example.

Can you develop this way of adding classes and naming them, so other components of style editor can work on the same way? On this way we can know where to find this styles in css or what is the name of div in html. I think this is really necessary. And this can be used for all other styles in future.

[lexoyo]

Hello

As I told you before, I'm working on this, and as you asked, here is what I am up to

Concerning the CSS classes, here is what I managed to do without taking too long:

1- set a CSS class (bottom right, "test")

2- set the CSS class in the "containerSelector" field

Feel free to ask questions The buttons at the bottom are for reset/copy/paste the style but I'm not sure if it is useful yet The wole system is a prototype, I'm not sure how useful it is

[budislav]

I am happy to see this nice progress!

I believe the reason why groups of text settings (title 1,2,3, links, paragraph) are all visible under the same tab is because it is still a prototype? I think the best is this settings to be shown up under style tab as one accordion button, also only one group of settings are needed. So when we select title or paragraph or links on the canvas, one group of settings should be shown up depending on what we selected but not all time visible every group of same settings. I believe that links, titles and paragraph have same settings?

Reset/copy/paste are really needed I just think that is not right place for them. So in case we have text options under style tab, buttons (Reset/copy/paste) could be placed on text accordion button on the right side on hover.

Thank you for working on this really important part! Keep updating us :)

[lexoyo]

Thank you for your questions and suggestions @budislav

Before I can answer, here is where I am now:

• I have found a way to do the "adding classes and naming them" thing, but the Silex way, less visually appealing than grape's but it works for people who don't understand css
• the style editor is no longer linked to the selection on stage, it is about global styles and CSS classes
• I found a way to add a "state" which makes it possible to style texts for desktop or mobile differently

Here is a demo of the style editor in its current state:

Change color of all texts: all website, all text boxes, all styles normal, Title 1, Title 2, Title 3

Change color of all "Title 1" texts

Change color of the texts in 1 text box

Reset a style

Change color of all the texts in 1 specific section

Make text bigger on mobile for the whole website

[budislav]

Thanks for demos @lexoyo very nice! Looks very promising, keep going!

[lexoyo]

Hello I need feedback about where I am now. Not everything is working, only a part of it.

Here is the tests you can do

• open https://silex-test-tmp.herokuapp.com/
• select a blanck template
• add a text box to a section somewhere
• in the text box, put some text, use only "Normal", "Heading 1", "Heading 2", "Heading 3" and add links too, NO color or bold inside the text editor please
• click the "style editor tab" in the property panel
• use the editor to style texts for desktop or mobile, hover state, other states

Please ask questions about how the style editor works, this will let me understand how you see things

cc @budislav @ceubri @BaguetteAgile

[ceubri]

Application error...

[lexoyo]

oops.. fixed :)

[ceubri]

Ok thx. Here is an example to edit test styles (1:30) : https://www.youtube.com/watch?v=8P2USdtkMd4 It's cool to edit "all headings" in the same time (3:40)...

[lexoyo]

Nice one Ceubri! You can do exactly that with the style editor: select the body (ESC key) then change H1 style Or do you mean we should be able to style all H1-H3 but not P at once?

[ceubri]

Ok it's working with the body stylization, nice and powerful !

edit "all headings" could be usefull to change the font familly or to capitalize all headings (not p) at the same time, but it's not easy to integrate this in the UI... or maybe add "titres" in the editor ?

My impression : i'm quickly lost, i don't remember what's styled or not. Maybe it could be easier not to have to select a container or anything, just have the basic (paragraph, Titles 1,2, 3...) and have the possibility to add new ones, for example when the section is colored (section-Title1, section-Title2,...),

I thing it's normal because you'r workin on:

duplicate, add, remove, reset are not working how to remove a background-color how to apply a style

[lexoyo]

Very interesting thx Did you notice the "*" in the state and visibility names? It means that there is a style there... We could do the same with H1-H3 names and even the properties Does it help? Maybe you are right, selection may be too complex? But it means that you can not simply style a text box without understanding styles...

[lexoyo]

So @ceubri what you say is that the style editor's ability to define styles for each element is confusing because you will not remember where you have put what style, right? I have had the same feeling and this is why every time you define a style on an element is is "remembered" and listed in the style drop-down list. Also the visibility list and the states list have a "*" in the names when a style has values defined for a visibility or state. Is that clear for you @ceubri and others? Does that help? How to make it easier to understand?

Ceubri you suggest it would be easier to have only named styles: on for the body and others that you define and apply to some elements. This is a very good simplification since selection does not change the editor anymore. The problem with that is that if a user does not understand the style system and just want to change the color of the text in the selected text box, it is only possible thanks to the buttons in the text editor. My idea with the style editor was to remove the buttons of the text editor and leave only H1-H3, P, links, and something like B or strong. I like this idea because there is only one style editor to maintain... But maybe it is good to keep a simple style editor in the text editor (only font, size, color) and the style editor for advanced styling. Then your solution seems better @ceubri... Another solution is to do as I did (style editor only, selection creates styles) but to limit styles to body, sections and text boxes. So 3 solutions

• As is: selection creates styles
• As is but with styles only for body, sections, text boxes (not containers)
• Text editor with simple styling and style manager only for named styles

I will think about it but your solution Ceubri (number 2) may be the best one...

[lexoyo]

There is something else I did not anticipate: in the curent style editor, if I first define the style of a text box, then the style of it's container, the style which will be applied is the one defined on the container whereas I would prefer the text box one. This is because the last one I define is the last in the Dom... So whatever solution we choose, we may need to display the styles in a reorderable list instead of a drop-down list. The first styles would be "stronger" than the last ones. This is hard to understand for the user right? Another solution would be to arbitrary decide that body is weaker, then sections, then containers, then text boxes...

[lexoyo]

Or the deeper the stronger would be good

But for named styles, these 2 last solutions can not be applied since a named style can be applied to a container, a section and a text box simultaneously :-/

[ceubri]

I think :

• it is good to keep a simple style editor in the text editor (only size, color, positionning... I'm not sure font family is good there) and the style editor for advanced styling (save styles)

• or if you keep only 1 editor, you'll have to disable the "double click" fonction to open the basic editor.

  click on text = selection click on text border = change crop click on corner = displace and then you have only 1 editor (top the basics, bottom the advanced style editor), and you style only texts

• is it normal not to have a "save button" in the editor ?

[lexoyo]

is it normal not to have a "save button" in the editor ?

As it looks like a panel I would say yes it is... Each change is applied immediately. And it is undoable

Would you expect a save button?

it is good to keep a simple style editor in the text editor (only size, color, positionning... I'm not sure font family is good there) and the style editor for advanced styling (save styles)

This is feasible, based on the current text editor. The main issue is that wysiwyg text editors work poorly and have bad markups - maybe it's me but I never managed to have a good one. Of we only display styles there, it is easier if think. The user enters text with no colors or any formatting and silex makes the styling

But still it is possible

or if you keep only 1 editor, you'll have to disable the "double click" fonction to open the basic editor.

That's a good idea You mean edit text in place not in an editor right?

[budislav]

This is how I think it should work and it is the easiest way also other web editors like webflow works:

• Text should not be editable trough wysiwyg text editor, but directly from style editor tab. So no double click on text box to see whole text. We need those settings in style editor tab.
• Designing a modern web site consider placing titles in other div's or places title and text are not linked together always. There should be insert Title and insert text in add element panel. So two separated elements.
• Making a style is really great idea you can make style by editing properties, copy that style and apply on other same element type. Please don't remove this option. But we need possibility to change that style name (class) from class name. Style name is actually class name, css should be clean and understandable. So if you like something on canvas you make for example you see title somewhere on canvas you like it, you just select it from canvas click on copy style from style editor, then select new title element you like to apply on that style on canvas and click on paste style. It can not be simpler.
• In style editor properties should have only settings for element you select on canvas not to have always visible settings for paragraph, link, title, title1, title2, title3. but if you select title element you have added trough add element panel on canvas you will see only setting for paragraph + buttons from wysiwyg text editor I mentioned earlier.

I will make a mockup so you understand everything easily.

[lexoyo]

• Text should not be editable trough wysiwyg text editor, but directly from style editor tab. So no double click on text box to see whole text. We need those settings in style editor tab.

Ok, I will do this soon, in a 2nd step

• Making a style is really great idea you can make style by editing properties, copy that style and apply on other same element type. Please don't remove this option. But we need possibility to change that style name (class) from class name. Style name is actually class name, css should be clean and understandable. So if you like something on canvas you make for example you see title somewhere on canvas you like it, you just select it from canvas click on copy style from style editor, then select new title element you like to apply on that style on canvas and click on paste style. It can not be simpler.

• [x] Ok I will do this now, 1st step

• Designing a modern web site consider placing titles in other div's or places title and text are not linked together always. There should be insert Title and insert text in add element panel. So two separated elements.
• In style editor properties should have only settings for element you select on canvas not to have always visible settings for paragraph, link, title, title1, title2, title3. but if you select title element you have added trough add element panel on canvas you will see only setting for paragraph + buttons from wysiwyg text editor I mentioned earlier.

Concerning these 2 points, I see exactly what you mean. The problem I have is linked to Silex's choice to have everything absolute by default. So create one H1 block then one H2 block and then a normal text block is not possible. One would have to align them by hand, and when one block is changed and has more or less lines, one would have to move all the blocks bellow it up or down...

So 1 single block for titles and text is needed in Silex.

This is also good in case you have dynamic text coming from translation system (coming soon) or a CMS

[budislav]

Concerning these 2 points, I see exactly what you mean. The problem I have is linked to Silex's choice to have everything absolute by default. So create one H1 block then one H2 block and then a normal text block is not possible. One would have to align them by hand, and when one block is changed and has more or less lines, one would have to move all the blocks bellow it up or down...

But nobody code site with absolute values today. I never seen a whole website made with absolute sizes. It is hard to make responsive websites since you need to touch every element and move it for every media query. This absolute positioning is problem for fluid webdesign.

Can we consider making css grid system? CSS grid is presented in every browser today, there are no reason why not to use them. Also since nobody make this in their editor, Silex can be first to have something unique and it can gain popularity only with this. Also responsive designing should be automatically done then.

[BaguetteAgile]

Concerning these 2 points, I see exactly what you mean. The problem I have is linked to Silex's choice to have everything absolute by default. So create one H1 block then one H2 block and then a normal text block is not possible. One would have to align them by hand, and when one block is changed and has more or less lines, one would have to move all the blocks bellow it up or down...

Bonjour, je viens de jeter un oeil au projet, super beau travail. Seulement il est vrai que j'ai difficile à retrouver les Styles de titre que j'ai mis pour ensuite pouvoir les éditer. j'ai pas bien compris le post avec les "*" j'essai de tester plus en profondeur en fin de semaine, je continu de suivre l'évolution.

*Hello, I just took a look at the project, great work. Only it is true that I have difficult to find the title Styles that I put to then be able to edit them. I did not understand the post with the "" I tried to test more in depth at the end of the week, I continue to follow the evolution.**

Good Work

[lexoyo]

But nobody code site with absolute values today. I never seen a whole website made with absolute sizes. It is hard to make responsive websites since you need to touch every element and move it for every media query. This absolute positioning is problem for fluid webdesign.

This is what is done in wix and silex historically. I believe it is much easy for real beginners to create websites. This vision has been challenged several time when I re-started silex from scratch, and it will eventually come back unless I have time to implement this grid system which you are pushing for some time now @budislav and which is clearly a great idea. It is also a good amount of work but I definitely keep it in mind.

Hello, I just took a look at the project, great work. Only it is true that I have difficult to find the title Styles that > I put to then be able to edit them. I did not understand the post with the "*" I tried to test more in depth at the end of the week, I continue to follow the evolution.

Thank you baguette! This is useful feedback. The "*" means that values have been set. It is meant to help you remember where you have changed things...

[lexoyo]

Here is what I did this afternoon and now live on https://silex-test-tmp.herokuapp.com/

• [x] selection on the stage does not change what style is being edited
• [x] you can create styles and apply them to multiple text boxes
• [x] if you use the base template I did, you will have a "all texts" style to style all texts at once => to test with my template, go here and click "fork", then go back to silex here and open github / style-editor-test / master / empty.html and then add text boxes, play with styles

What I did not do yet

• UI / design the tool
• I did not change the text editor yet (step 2 of budislav and ceubri 's feedback)

Let's keep thinking and talking about that, I feel like we are getting closer

[budislav]

@lexoyo

• It should apply style automatically on element when you select style from select button so we don't need apply current style button. Because we already named our style we can select it back from list. Easier and faster.
• Silex should automatically set name for style but user can change it.
• When you select text box on canvas, select style buton with their settings should change to that style that is applied to that text box. So easily you can see what style is applied when you select each text box from canvas.

[BaguetteAgile]

@lexoyo Very good job, is it possible to add (see the screenshot) information that gives us directly the style used for the current selection, such as:

My style H1

as you can easily navigate the menu to change the current selection.

Otherwise I did not notice any apparent bug ...

I'm still watching this week

[budislav]

@lexoyo this is how I think it should look like. Visibility select button should be under settings tab. I removed blink from decoration because it is not supported everywhere? You can change to numerical font size by clicking on that w letter that stays for word. I don't know how to name that mode with words in sizes. So you click on that w and it should dorp list with px, em and %. This is also one step closer to have other css style properties so on the end we have one tab for all styles, just like in Webflow.

[lexoyo]

Thank you @all for your participation (welcome @jaellozano @valentinogagliardi @AndreaMonzini)

• It should apply style automatically on element when you select style from select button so we don't need apply current style button. Because we already named our style we can select it back from list. Easier and faster.
• Silex should automatically set name for style but user can change it.
• When you select text box on canvas, select style buton with their settings should change to that style that is applied to that text box. So easily you can see what style is applied when you select each text box from canvas.

It looks like what I did before right? It was a bit confusing right? Could you describe each thing I have to change to do that?

Very good job, is it possible to add (see the screenshot) information that gives us directly the style used for the current selection, such as: My style, H1

Would it be ok to have a "*" where values are set beside the H1-H3 names? Or do you mean a field which says "selection style: My Style" maybe? Or maybe is it as @budislav suggests, to select the style of the element which you select on the stage?

@budislav: this is how I think it should look like.

I love it when you do that!!! I see you added list style, which is a great idea You removed the selection of <H1>, <H2>, <H3>, <P>, <A>? As discussed before, I am aware it is not the ideal solution but we need that for the moment... Maybe beside "pseudo class" as a small drop down list?

Also I wanted to add <b>, <i> and <u> to be able to style the elements marked by the user in the text editor. And a "all" to edit styles of all the titles and texts for the selected style.

Visibility select button should be under settings tab.

Ok, good point! It could be the same as for the properties: when you are in Desktop view then it changes the styles for desktop+mobile and in mobile view it changes styles for mobile only, what do you think? Will it be clear for the user? Should we display it somewhere?

I removed blink from decoration because it is not supported everywhere?

:+1:

You can change to numerical font size by clicking on that w letter that stays for word. I don't know how to name that mode with words in sizes. So you click on that w and it should dorp list with px, em and %. This is also one step closer to have other css style properties so on the end we have one tab for all styles, just like in Webflow.

• [ ] Ok, this I will do in a 3rd step ok? I will think about how to do that in prodotype

In the mean time I will keep the 2 values (word/numeric) and if one is defined the other has no effect

All feedback are welcome!

[lexoyo]

Oh and the pseudo class could be display like in the browsers developer consoles, with a dropdown marked as a ":hov" button

Or like this maybe

[ceubri]

I just finish my test and... ... Great job Lexa, i like your style editor !

[budislav]

@lexoyo

It looks like what I did before right? It was a bit confusing right? Could you describe each thing I have to change to do that?

I don't quite remember how is working before you changed this fastly :D

• It should apply style automatically on element when you select style from select button so we don't need apply current style button. Because we already named our style we can select it back from list. Easier and faster.

The process is next:

1. You put a text box on canvas
2. Style (class) is automatically added named "textbox1" and applied so you can edit text styles immediately. You can rename it by pressing the button I made a pencil symbol but renaming is optional. Next text box will be automatically get name textbox2 and so on.
3. Double click on it to edit text and it don't open text editor but you can just type inside of that text box. We have all text style settings in the style panel. You can change style settings and style need to be automatically applied without pressing any button. You already elected that text box so you know what you want to edit right away.
4. Every change you made in style editor is saved to that style for example textbox1 or how you renamed it. So if you want to change style for that text box to some style you made before you just select style from style select button and style should be automatically applied on canvas on that textbox and it will show you that style settings bellow. On that way you can easily switch between styles and see directly on canvas all changes. We don't need apply button.

• Silex should automatically set name for style but user can change it.

I explained that above.

• When you select text box on canvas, select style button with their settings should change to that style that is applied to that text box. So easily you can see what style is applied when you select each text box from canvas.

Also explained this above. When you select text box on canvas it will select style in select button and show all style settings for style we made for that textbox. You will see style settings of every text box you select on canvas in style panel.

I love it when you do that!!!

I want we make serious application for everyday working and making serious stuff, no focus on amateurs anymore please :)

Would it be ok to have a "*" where values are set beside the H1-H3 names? Or do you mean a field which says "selection style: My Style" maybe? Or maybe is it as @budislav suggests, to select the style of the element which you select on the stage?

Just keep in mind simple and effectively. I need to work more on this problem.

You removed the selection of <H1>, <H2>, <H3>, <P>, <A> ? As discussed before, I am aware it is not the ideal solution but we need that for the moment... Maybe beside "pseudo class" as a small drop down list?

I will add those things in next mockup I am working right now. This also need more thinking to make it as simple as possible.

Also I wanted to add <b>, <i> and <u> to be able to style the elements marked by the user in the text editor. And a "all" to edit styles of all the titles and texts for the selected style.

This should be done smartly, I need to figure out, but please no more text editor. That's why we have now everything for text in style panel. That text editor should die. Kill him please.

Ok, good point! It could be the same as for the properties: when you are in Desktop view then it changes the styles for desktop+mobile and in mobile view it changes styles for mobile only, what do you think? Will it be clear for the user? Should we display it somewhere?

Definitely! I need to work on this.

You can change to numerical font size by clicking on that w letter that stays for word. I don't know how to name that mode with words in sizes. So you click on that w and it should dorp list with px, em and %. Ok, this I will do in a 3rd step ok? I will think about how to do that in prodotype In the mean time I will keep the 2 values (word/numeric) and if one is defined the other has no effect.

This only applies to that input for changing font size, because there is only one type you can have at same time, so it should be one input and you can just change it by selecting it from that letter in the corner.

I think you should wait to see whole concept before you change anything :)

[budislav]

@lexoyo

Oh and the pseudo class could be display like in the browsers developer consoles, with a dropdown marked as a ":hov" button dev-tool-hover1

So this means there can be more activated more than one? I like how Webflow made that, what do you think?

[lexoyo]

So this means there can be more activated more than one?

Only 1 at a time

like how Webflow made that, what do you think?

Yes it looks nice!! Should it be reset when we change the style to edit? How will the user know which state is being edited?

[budislav]

Should it be reset when we change the style to edit?

Yes I will add a button for reset.

How will the user know which state is being edited

We can color the name of those settings are changed.

[budislav]

Ok, I think I touch everything. Since we have possibility to save text css properties to style, we can save other things too. I know we don't have all of them right now but we need to have a space for them and this style tab is excellent.

We need also number of how much element with same style are on the same page or others. We can select that circle or text and they will be selected on canvas.

Also when you are on desktop view there is placed desktop icon left of style name, when we changed to mobile view that icon will also change to mobile symbol. When you change view, style is also changed to that device you selected, so it is easy to make any changes for each device, just switch view and style should be changed.

On the top there is a name of html tag we edit and in this case it is h3 which we can select under component settings tab.

They are still text box but you can set exactly what you want it to be. On this way we will have like separated elements. They are still absolute positioned because of Silex background nature right now.

For applying bold italic or link on word on canvas the best it would be if it looks like this.

So when you set a link for example it should look like this

[lexoyo]

Oh wow this is awesome!

It will take several steps to get there but let's do something like this

Starting with the UI.... Could you create png images with transparent background and white icon for style, variant, decoration, transform please? The others I might have them in font awesome?

[budislav]

I can make .png, do you maybe want .svg so you put those into font icons for HDPI screens? Icons should be scalable but also pixel perfect so they look nice on retina screens.

One icon I made wrong. Under style there are oblique option, which is similar to italic, I don't see a difference, and I don't know how to design that icon. https://www.w3schools.com/cssref/tryit.asp?filename=trycss_font-style https://stackoverflow.com/questions/1680624/font-style-italic-vs-oblique-in-css

Bold icon I place there by mistake should be on canvas inline editing under selected text as I show you on images above, because bold is used when you want to bold only one word or more, but for whole sentence usually works changing font weight.

[lexoyo]

Sure, svg is even better

Oblique we can just forget right? Then style becomes an on/off button? Or a check box?

Concerning bold, it will be a button in the text editor tool bar, whereas font weight is supposed to be in the style editor. Should I do it with a button bar or a drop-down list?

[budislav]

@lexoyo Yes we can forget about oblique.

Style is just without oblique button like in mockup.

Font weight would be ideal to be in shape of drop-down button like in mockup. (I have updated image in that post above).

Also it would be awesome if everything you hover in drop-down list shows on canvas directly like preview, so you don't need to click on each option to see how it will look, but it will activate it only on click of course.

I sent you all .svg icons on gmail.

[lexoyo]

Hello

A quick note about where I am today on this subject

I have added several things in Prodotype, the project which holds the UI for Silex. It looks like this

The push buttons with icons are there to create the UIs you specified @budislav Please try these UI components on Prodotype demo page

[budislav]

Glad to know you are working on UI! @lexoyo

[lexoyo]

This is my "road map" for the weekend (very ambitious but I have a lot of coffee)

• [x] the tags which we can "style": H1, H2, H3, P, B, I, U, A
• [x] integrate @budislav 's icons and UI
• [x] Add link-active class and other Silex specific css classes
• [x] fix buttons bugs (rename, create, ...)

[BaguetteAgile]

Good luck with the work !!

[budislav]

let be easy to implement! :)

[lexoyo]

Hi guys, thx for the support :) Here is what I did in approx 10 hours, please test with the "responsive" blank template only https://silex-test-tmp.herokuapp.com/

Notes and questions:

• the buttons under the style name are not design and have bugs
• the "mobile" icon on the left of the style name means: "mobile only" and it should probably be linked to the mobile mode (enter/exit the mobile editor when one press this button)

As always, I'll appreciate your tests, questions and feedback :) You're the bests

[lexoyo]

I'm thinking also I should

• [x] in font-size: only keep the numeric version, not the named sizes (xx-small...)
• [x] add the list styles
• [ ] add margins and paddings which are useful not only for text... so maybe it should be put somewhere else?

Did you see how powerful the psheudo classes are?

[lexoyo]

UI integration is really exhausting

But it starts to look good:

I used what I have done in Prodotype + the icons and UI ideas of @budislav And also

• [x] in font-size: only keep the numeric version, not the named sizes (xx-small...)
• [x] add the list styles
• [x] Add link-active class and other Silex specific css classes

Now live on https://silex-test-tmp.herokuapp.com/

[budislav]

Hi @lexoyo Thank you for your hard work here! I need to explain my mockup little more. There should be only Paragraph, heading, Link and List and what you select you will see new options under them, just like in mockup I made. Also this should be under component settings tab, text box is one component, it's a modular system.

When headings are selected there are options: h1,h2,h3,h4,h5,h6. When List is selected there are options: ul, ol. Paragraph don't have any options and for link I should design that mockup.

Bold, underline and Italic are styles for text those buttons should be under style tab. Also on canvas.

Also that mobile icon should be only indicator that will show on what mode you are, so when you are making a style for mobile you need to select mobile editor button to go into that mode, then everything you change from style will be on visible mobile only. I don't understand this concept you made now with mobile only?

In font-size: only keep the numeric version, not the named sizes (xx-small...)

Agree.

add the list styles

We can select style in that dropdown select button. I would say don't focus on that right now.

add margins and paddings which are useful not only for text... so maybe it should be put somewhere else?

Yes we need, that's why I made that accordion button "Layout" above Typography :) Just look at Webflow Layout section, that is just what we need.

[budislav]

@lexoyo wow that really start's to look good! I believe it is exhausting but precision is the key for good quality, you are really close :)

[lexoyo]

I'll answer you very soon @budislav I have almost finished the integration https://silex-test-tmp.herokuapp.com/