I’m currently doing some work with StyleSheets and have been looking for a CSS editor for iPad with a live preview function that allows you to immediately see the impact of any changes (i.e. without having to hit a preview button every time).
Ideally this would have the HTML and CSS code on the left of the screen and the live preview on the right.
I know there are various options for this on the Mac (e.g. Brackets and Stylizer), but I couldn’t see much on iOS.
I’m also aware that there are web based options, but I want something on device that doesn’t require internet connectivity.
The closest I found is what looks like a brand new app called “Web Playgrounds”. This has a nice side by side view of the HTML code and a live preview of the resultant web page, but as far as I can tell you only get to see the impact of CSS changes in real time if you include these in the header section of the HTML file, not if they are in a separate CSS file (which is the more normal case).
Just wanted to give a shout out to this app and ask if there are other options that people have used ?
You can use Textastic. Open an html file then open it’s preview in Safari in a split screen window. Then open the css file in Textastic. You do have to refresh in Safari after making the changes in the CSS… so, it’s not going to change “live” without refreshing.
I do use (and like) Textastic, but have always tended to rely on the built in preview function and hadn’t thought to use the split screen approach with Safari.
I also found you can do something similar with Panic’s Code Editor.
The down side to both of these is that you have to take an action to see the preview every time you make a change as opposed to the immediate feedback you get with the Web Playgrounds app.
I know this sounds like a small issue, but if you’re repeatedly making lots of small tweak to a style sheet to get something looking right then it adds up.
I also found that after a while Safari lost the ability to reload the page from Textastic and gave a “Safari cannot open the page because it could not connect to the server” error requiring you to re-initiate the preview from the Textastic side.
Again not a showstopper, but just adds more friction.